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

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

3 Answers 122 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Daniel Blendea
Top achievements
Rank 1
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},
                            {"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

Sort by
0
Viktor Tachev
Telerik team
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.
0
Daniel Blendea
Top achievements
Rank 1
answered on 10 Feb 2020, 01:47 PM

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.

0
Viktor Tachev
Telerik team
answered on 12 Feb 2020, 11:21 AM

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

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.
Tags
Date/Time Pickers
Asked by
Daniel Blendea
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Daniel Blendea
Top achievements
Rank 1
Share this question
or