Umbraco Forms DateTimePicker

Question

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? I was thinking that I would do it in the umbraco.forms.js, but I can't find the correct place.

nologo · Accepted Answer · 2017-07-19 05:40:19Z

Using dotPeek, i was able to see original DatePicker field type references a partial view missing from your implementation:

public class DatePicker : FieldType
  {
    public override bool SupportsRegex
    {
      get
      {
        return false;
      }
    }

    public DatePicker()
    {
      this.Id = new Guid("F8B4C3B8-AF28-11DE-9DD8-EF5956D89593");
      this.Name = "Date";
      this.Description = "Renders a date picker";
      this.Icon = "icon-calendar";
      this.DataType = FieldDataType.DateTime;
      this.Category = "Simple";
      this.SortOrder = 30;
      this.FieldTypeViewName = "FieldType.DatePicker.cshtml";
    }

    public override IEnumerable<string> RequiredPartialViews(Field field)
    {
      return (IEnumerable<string>) new string[1]
      {
        "~/Views/Partials/Forms/DatePicker.cshtml"
      };
    }

    public virtual IEnumerable<object> ProcessValue(IEnumerable<object> postedValues)
    {
      return DatePicker.ProcessFieldValues(postedValues);
    }

    public override IEnumerable<object> ConvertToRecord(Field field, IEnumerable<object> postedValues, HttpContextBase context)
    {
      return DatePicker.ProcessFieldValues(postedValues);
    }

    private static IEnumerable<object> ProcessFieldValues(IEnumerable<object> postedValues)
    {
      List<object> objectList = new List<object>();
      postedValues = (IEnumerable<object>) postedValues.ToArray<object>();
      if (!postedValues.Any<object>())
        return (IEnumerable<object>) objectList;
      DateTime result;
      if (DateTime.TryParse(postedValues.First<object>().ToString(), out result))
        objectList.Add((object) result);
      return (IEnumerable<object>) objectList;
    }
  }

Thank you for your answer. Nothing I needed, now almost 2 years later, but great to know for others who might be having the same problems!

Collectives™ on Stack Overflow

Umbraco Forms DateTimePicker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related