umbraco forms datetimepicker

Robert Stigsson 47 posts 158 karma points

Sep 02, 2015 @ 06:13

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() {
            //Provider
            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.

Copy Link

Dan Evans 631 posts 1018 karma points

Mar 11, 2016 @ 11:17

Just wondering if you ever got this to work?

Copy Link

Matthew Kirschner 323 posts 611 karma points

Jun 14, 2017 @ 20:30

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: https://github.com/owenmead/Pikaday/ . 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))"]
            }
        };

        moment.locale("@CultureInfo.CurrentUICulture.Name");

        var local = locales.default;

        local.midnight = "12 AM";
        local.noon = "12 PM";

        $(".datepickerfield")
            .each(function () {
                var currentId = this.id;
                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;
        }
    });
</script>

Some improvements that could be made:

Make this its own fieldtype so that editors can choose between date or date-time
Use https://eonasdan.github.io/bootstrap-datetimepicker/ instead, it's got a cleaner UI than pikaday, and includes time support by default

Copy Link

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:

https://our.umbraco.com/forum/umbraco-forms/86660-format-datetime-with-momentpikaday-for-submission-to-external-sql-database

Did you encounter this problem?

Copy Link

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.

Copy Link

Robert Stigsson 47 posts 158 karma points

Jul 20, 2017 @ 11:11

Tips for further viewers: https://stackoverflow.com/questions/32333421/umbraco-forms-datetimepicker/45181789#45181789

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco Forms DateTimePicker