Updating model on start/end date changing

[Rob]

As far as I can tell binding is not an option with DateRangePicker.  Instead I believe you have to handle the change event and update your model from there.   However for the life of me I can't work out how to do this.  This is what I currently have:

@Html.HiddenFor(model => model.EarliestDeliveryDate)
@Html.HiddenFor(model => model.LatestDeliveryDate)
@(Html.Kendo().DateRangePicker()
    .Name("deliveryDate")
    .Range(r => r.Start(Model.EarliestDeliveryDate).End(Model.LatestDeliveryDate))
     .Messages(m => m.StartLabel("Earliest").EndLabel("Latest"))
    .Events(events => events.Change("onDeliveryDatesChange"))
)

<script type="text/javascript">
    function onDeliveryDatesChange() {
        var range = this.range();
        if (range.start && range.end) {
            var earliest = $('#EarliestDeliveryDate');
            var latest = $('#LatestDeliveryDate');
            earliest.val(range.start);
            latest.val(range.end);
        }
    }
</script>

 

The values are getting updated on the hidden fields but this is not getting reflected on the model.  I think this is because the format of the dates that are returned in range.start/end is wrong.  It could also be something completely different. Can you please give me an example of how to do this and I'd suggest also updating your documentation with the example too.

Also if Name is not set then rendering utterly fails and no good message is given.  This is not intuitive as other controls don't seem to need this value setting.

 

 

 

[Konstantin Dikov]

Hi Rob,

You are correct that there is no model binding for the DateRangePicker, but we are currently working on this and if everything goes as planned, this feature will be available in the next release. 

As for the issues that you are facing, in order for the model to be updated, after calling the "val" method of the hidden input elements, you should also trigger the "change" event:

earliest.val(range.start);
earliest.trigger("change");
latest.val(range.end);
latest.trigger("change");

As for the Name, this is mandatory for all editors, because the Name is used for the "id" attribute, which is used for the initialization script.


Regards,
Konstantin Dikov
Progress Telerik

[Rob]

Thanks.

I realised the Name thing just after posting the comment but couldn't edit it the post.  I hadn't realised that all my other controls were using Kendo().WidgetFor(...) which automatically sets Name, rather than Kendo().Widget() as in this case because of the lack of binding.

[Nicolas]

In my case it's returning a wrong format (EndDate) to the controller when a do the change event unless I format the date before

$("#StartDate").val(kendo.toString(range.start, 'd'));
$("#EndDate").val(range.end);

<input data-val="true" data-val-required="The Event Start Date field is required." id="StartDate" name="StartDate" type="hidden" value="5/31/2019" />
<input data-val="true" data-val-required="The Event End Date field is required." id="EndDate" name="EndDate" type="hidden" value="Sun Jun 02 2019 00:00:00 GMT-0400 (Eastern Daylight Time)" />

[Konstantin Dikov]

Hello Nicolas,

You need to ensure that the value in the hidden input is in a format that will be parsed by the framework on submit. I would suggest formatting it in the same way as the StartDate, before setting it as a value of the hidden input.


Regards,
Konstantin Dikov
Progress Telerik

[Nicolas]

Yes it make sense but my concern is that we are passing a date Type and it return a not understandable date format to be parsed where I was expecting to return a date type. So, may be I'm doing something wrong here! Why do we need to convert to string formatted?

@Html.HiddenFor(model => model.StartDate)
@Html.HiddenFor(model => model.EndDate)

@(Html.Kendo().DateRangePicker()
                            .Name("daterangepicker")
                            .Min(DateTime.UtcNow.AddYears(-25))
                            .Max(DateTime.UtcNow.AddYears(25))
                            .HtmlAttributes(new { style = "width: 100%", title = "Event's Date" })
                            .Range(r => r.Start(Model.StartDate).End(Model.EndDate))
                            .Events(e => e.Change("onChange"))
                        )

 

function onChange() {
        var range = this.range();
        if (range.start && range.end) {
            $("#StartDate").val(kendo.toString(range.start, 'd'));
            $("#EndDate").val(kendo.toString(range.end, 'd'));
            //$("#StartDate").val(range.start);
            //$("#EndDate").val(range.end);
            $("#StartDate").trigger("change");
            $("#EndDate").trigger("change");
        }
    }

[Viktor Tachev]

Hello Nicolas,

You can configure which fields the DateRangePicker will use for start and end by specifying the StartField and EndField options for the widget. 

Like so: 

@(Html.Kendo().DateRangePicker()
    .Name("daterangepicker")
    .Min(DateTime.UtcNow.AddYears(-25))
    .Max(DateTime.UtcNow.AddYears(25))
    .HtmlAttributes(new { style = "width: 100%", title = "Event's Date" })
    .StartField("StartDate")
    .EndField("EndDate")
    .Events(e => e.Change("onChange"))
)

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Nicolas]

Using 2019.1.115.Core and do not have any of those 2 properties you mention. Are they on a new release?

[Viktor Tachev]

Hi Nicolas,

The options suggested in my previous post are available with the latest version of the components. Model binding was added to the DateRangePicker widget with the R2 2019 release. Thus, with version 2019.2.514 you can bind DateRangePicker to fields in the Model out of the box. There is no need to use additional code and Hidden inputs to submit the values to the Controller. 

Please update the widgets to the latest release and let me know how the new functionality works on your end.


Regards,
Viktor Tachev
Progress Telerik