Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Robert Stigsson 47 posts 158 karma points
    Sep 02, 2015 @ 06:13
    Robert Stigsson

    Umbraco Forms DateTimePicker

    I've tried to create a second DatePicker, but one that also allows for Time to be selected.

    My FieldType.DateTimePicker is

    @model Umbraco.Forms.Mvc.Models.FieldViewModel
        string val = string.Empty;
        if (Model.ValueAsObject != null && Model.ValueAsObject != "")
            DateTime d;
            d = (DateTime)Model.ValueAsObject;
            val = d.ToShortDateString();
    <input type="text" name="@Model.Name" id="@Model.Id" class="datepickerfield" value="@val"
           @{if (Model.Mandatory)
               <text> data-val="true" data-val-required="@Model.RequiredErrorMessage" </text>

    The file is placed under Partials/Forms/Fieldtypes.

    I also have a DateTimePicker.cs class

    namespace FALCO_CLIENT.App_Plugins.UmbracoForms
        public class DateTimePicker : Umbraco.Forms.Core.FieldType
            [Umbraco.Forms.Core.Attributes.Setting("ValueAsObject", description = "DateTimePicker", view = "DateTimePicker")]
            public DateTime ValueAsObject { get; set; }
            public DateTimePicker() {
                this.Id = new Guid("D6A2C406-CF89-11DE-B075-66B155D89593 ");
                this.Name = "DateTimePicker";
                this.Description = "Renders a html input";
                this.Icon = "icon-autofill";
                this.DataType = FieldDataType.DateTime;
                this.SortOrder = 10;

    and I have a small View (DateTimePicker.html) for the class:

    <input tabindex="-1" type="text" /> <button class="btn"><i class="icon icon-calendar"></i></button>

    In Umbraco Forms I do get the option to "pick" DateTimePicker, but it only generates a Text-field which I can write in.

    What am I doing wrong?

    As a follow up question: Where do I set the DatePicker to allow Time, and not just Date? I was thinking that I would do it in the umbraco.forms.js, but I can't find the correct place.

  • Dan Evans 629 posts 1016 karma points
    Mar 11, 2016 @ 11:17
    Dan Evans

    Just wondering if you ever got this to work?

  • Matthew Kirschner 323 posts 611 karma points
    Jun 14, 2017 @ 20:30
    Matthew Kirschner

    I got this to work by updating the current date picker rather than making a new one.

    I'm using owenmead's fork of pikaday found here: . You'll want to add his updated pikaday css and js files somewhere in your project. I put mine in the ~/css and ~/scripts folders, respectively.

    The only file you need to update is DatePicker.cshtml in ~/Views/Partials/Forms/Themes.

    Here's the updated code:

    @using System.Globalization
    @using Umbraco.Forms.Core
        var datePickerYearRange = Configuration.GetSetting("DatePickerYearRange");
        if (string.IsNullOrEmpty(datePickerYearRange))
            datePickerYearRange = "10";
    <link rel="stylesheet" href="/css/pikaday.css" />
    <script src="/App_Plugins/UmbracoForms/Assets/moment/min/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="/scripts/pikaday.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var locales = {
                default: {
                    previousMonth: "<<",
                    nextMonth: ">>",
                    months: ["@Html.Raw(string.Join("\",\"", CultureInfo.CurrentCulture.DateTimeFormat.MonthNames))"],
                    weekdays: ["@Html.Raw(string.Join("\",\"", CultureInfo.CurrentCulture.DateTimeFormat.DayNames))"],
                    weekdaysShort: ["@Html.Raw(string.Join("\",\"", CultureInfo.CurrentCulture.DateTimeFormat.AbbreviatedDayNames))"]
            var local = locales.default;
            local.midnight = "12 AM";
            local.noon = "12 PM";
                .each(function () {
                    var currentId =;
                    new Pikaday({
                        field: document.getElementById(currentId),
                        yearRange: "@datePickerYearRange",
                        i18n: local,
                        format: "LL LT",
                        onSelect: function (date) {
                            setShadow(currentId.replace("_1", ""), date);
                        showTime: true,
                        showMinutes: true,
                        use24hour: false,
                        autoClose: false
            function setShadow(id, date) {
                var value = moment(date).format('YYYY-MM-DD LT');
                var field = document.getElementById(id);
                field.value = value;

    Some improvements that could be made:

  • Aaron 22 posts 93 karma points
    Oct 09, 2018 @ 16:28

    Hi Matthew we're using your solution with Owen Mead's fork but Umbraco Forms is rejecting the date/time string as this user also experienced:

    Did you encounter this problem?

  • Aaron 22 posts 93 karma points
    Oct 10, 2018 @ 11:03

    Please ignore...our problem was slightly different to OP.

    We had two adjacent modified date-time picker fields which were similarly named.

    Breaking in the Umbraco Forms code with dotPeek seemed to show the second field value was somehow null at the point of validation leading to the form being rejected.

    Renaming the fields appears to have fixed the problem.

  • Robert Stigsson 47 posts 158 karma points
    Jul 20, 2017 @ 11:11
Please Sign in or register to post replies

Write your reply to: