Kendo Date-Picker Value - Binding Issue

2 posts, 0 answers
  1. Sethilraj
    Sethilraj avatar
    5 posts
    Member since:
    Feb 2014

    Posted 08 Jul Link to this post

    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 class="date-range-item">
              <div class="date-range-label">End Date</div>
              <input id="EndDate" kendo-date-picker k-ng-model="Obj.endDate" />

    In controller

            $scope.StartDate = $('#StartDate').kendoDatePicker({
                parseFormats: ['MM/dd/yyyy']

            $scope.EndDate = $('#EndDate').kendoDatePicker({
                parseFormats: ['MM/dd/yyyy']

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

    In Service

    this.Validation = (start: kendo.ui.DatePicker, end: kendo.ui.DatePicker) => {            
                    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.


  2. Stefan
    Stefan avatar
    195 posts

    Posted 11 Jul Link to this post

    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:

    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.

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top