DateInput() for data-role="datepicker" declared in template

[Daniel Blendea]

<div id="AffectedCountries" name="AffectedCountries" data-role="grid"
                data-bind="source: dudu.AffectedCountries"
                data-columns='[{"field": "Name", "title": "Name", "width": 180 },
                    {"field": "ValidFrom", "title": "Valid From", "width": 170},
                            {"field": "ValidFrom", "title": "Valid From", "width": 170},
                            {"command":"", "width": 50}]'
                data-row-template="list-country-group-row-template" >
</div>

<script type="text/x-kendo-template" id="list-country-group-row-template" >
    <tr role="row" class="k-row" data-bind="attr: { idRow: IdForBinding }">
    <td data-bind="text: Name"></td>
    <td class="with-required">
     <input type="date" data-type="date" data-role="datepicker" class="validFrom" required
       data-format="yyyy-MM-dd" data-bind="value: ValidFrom, events: {change: validFromChanged}" />
     <span class="required">*</span>
    </td>
    <td>
     <input type="date" data-type="date" data-role="datepicker" class="validTo"
         data-format="yyyy-MM-dd" data-bind="value: ValidTo, events: {change: validToChanged}"/>
    </td>
     <td class="k-command-cell">
    </td>
  </tr>
</script>

 

I have a template with rows, each row with 2 dates, bound to an entity. Both dates have a kendoDatePicker.

I need to apply some constraints, like ValidTo value should have as min the value of ValidFrom.

And I would like to prevent the user from typing wrong values in the input field. Like "DateInput()" for ASP .NET Core or  "dateInput: true" in Kendo.

Is there a way to do this? Since I could not fing any "data-*" attribute to use, and the fields do not have an Id, being bound to a viewModel.

Should I generate some kind of Id for each ValidFrom and ValidTo, for each row, and bind a $(id).kendoDatePicker()?

 

 

 

[Viktor Tachev]

Hello Daniel,

 

In order to enable the dataInput for a DatePicker when using MVVM I would suggest including the data-date-input attribute. For more information about data- attributes check out the article below:

https://docs.telerik.com/kendo-ui/framework/mvvm/overview#setting-the-data--options

 

The example below illustrates the approach: 

https://dojo.telerik.com/AYAdAWUX

 

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

 

Regards,
Viktor Tachev
Progress Telerik

[Daniel Blendea]

Hi, thanks for the example.

When I try to access the page referenced in https://docs.telerik.com/kendo-ui/framework/mvvm/overview#setting-the-data--options, meaning page https://docs.telerik.com/kendo-ui/intro/widget-basics/data-attribute-initialization#set-data--options, I get a 404.

[Viktor Tachev]

Hello Daniel,

 

Thank you for reporting the incorrect link to us.I have updated it in the documentation and it should be live soon. The correct address to the article describing the naming convention is available below:

https://docs.telerik.com/kendo-ui/intro/widget-basics/mvvm-initialization#setting-the-data-options

 

Regards,
Viktor Tachev
Progress Telerik