This is a migrated thread and some comments may be shown as answers.

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

3 Answers 1435 Views

DatePicker

This is a migrated thread and some comments may be shown as answers.

Daniel Blendea asked on 06 Feb 2020, 01:00 PM

<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},

{"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()?

3 Answers, 1 is accepted

answered on 10 Feb 2020, 01:00 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.