Kendo Date-Picker Value - Binding Issue

[Sethilraj]

Hi guys,

I have two kendo date pickers. One for start date(DP1) and another for end date(DP2). When Start Date is selected in DP1, the days before the start date in DP2 should be disabled. I am using k-ng-model to bind the data, but I couldn't acheive it.

here is how the HTML part of datePicker looks l

   <div class="date-range">
       <div class="date-range-item">
          <div class="date-range-label">Start Date</div>
          <input id="StartDate" kendo-date-picker k-ng-model="Obj.startDate" />
       </div>
       <div class="date-range-item">
          <div class="date-range-label">End Date</div>
          <input id="EndDate" kendo-date-picker k-ng-model="Obj.endDate" />
       </div>
   </div>

In controller

        $scope.StartDate = $('#StartDate').kendoDatePicker({
            parseFormats: ['MM/dd/yyyy']
        }).data('kendo-date-picker');

        $scope.EndDate = $('#EndDate').kendoDatePicker({
            parseFormats: ['MM/dd/yyyy']
        }).data('kendo-date-picker');

        $scope.StartDate.bind("change", function (): void {
                Service.Validation( $scope.StartDate, $scope.EndDate);
            }
        );

In Service

this.Validation = (start: kendo.ui.DatePicker, end: kendo.ui.DatePicker) => {            
           end.setOptions({
                disableDates: (date: any): boolean => {
                    if (start) {
                        if (start.value()) {
                            if (date < start.value()) {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    } else {
                        return false;
                    }
                }
            });

1) The First Problem I am facing is, I am getting two date Pickers in the UI. When I remove the kendo-date-picker in the HTML part then only one kendo Date Picker is being Displayed.

2) Second Problem is When I am saving the object. the Start date and End date are holding null as k-ng-model is not binding the Dates.

Please post a solution and explain the Reason behind this behaviour.

Thanks.

[Stefan]

Hello Sethilraj,

Please check our demo for the Kendo UI DateTimePicker with AngularJS that shows how to initialize the widget and use k-ng-model to bind the data:

http://demos.telerik.com/kendo-ui/datepicker/angular

Regarding the questions:

1) Two date Pickers in the UI - there are two widgets in the UI as in the provided code the DateTimePicker is initialized in the HTML and then again in the JavaScript. Please initialize the widget only in the HTML.

2) The Start date and End date are holding null as k-ng-model is not binding the dates- Please refer to the provided demo to check how to utilise the data object from k-ng-model.

Let me know if you need additional information.

Regards,
Stefan
Telerik by Progress