Angular DatePicker not working as expected

2 posts, 0 answers
  1. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 21 Nov 2014 Link to this post


    The angular DatePicker is not giving me "dateString"and  "dateObject values when my file is .cshtml. The change event is also not raised.
    However, when the file is pure .html then things work properly.  Also, the jquery version of datepicker works properly.
    I am not getting what is missed? Please let me know.

    Also, How do I initialise Kendo date picker with a value from a controller method, like date picker  and text box, check box etc. Basically I should  get value from a MVC controller method as initial value. I am not able to do it.... Please let me know this also..

    Following is the code portion...

        ViewBag.Title = "Edit Product";
        Layout = "~/Views/Shared/_Layout.cshtml";

    @section HeaderSection {

        <link href="../../styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="../../styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
        <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

        <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
        <script src="../../Scripts/angular.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.angular.min.js" type="text/javascript"></script>


        <div id="example" ng-app="KendoDemos">
        <div class="demo-section k-content" ng-controller="MyCtrl">

      <div class="details">
      <h5>Product Name </h5>
      <input kendo-masked-text-box style="width: 300px"  

       <h5> Price</h5>
       <input kendo-numeric-text-box k-min="0", k-max="99999"
                k-options ="priceOptions"   

       <h5> Select</h5>
       <input type ="checkbox"  id="checkbox1" ng-model="initValue"/>

       <h5> Choose Date</h5>
       <input kendo-date-picker   k-format="'dd MMMM yyyy'" ng-model="dateString" k-ng-model="dateObject"/>
    dateString: {{ dateString }}
    dateObject: {{ dateObject | date:"EEEE, MMMM d, yyyy" }}
    @*typeof dateObject: {{ getType(dateObject) }}
    dateObject instanceof Date: {{ isDate(dateObject) }}*@
       <input id="datepicker" value style="width: 300px;"/>

        <h5>Categories </h5>
        <select id="categories1"
                kendo-drop-down-list style="width: 300px"

        <h5>Save Details </h5>
        <kendo-button on-click="onSave()"> Save</kendo-button>      


  2. Georgi Krustev
    Georgi Krustev avatar
    3724 posts

    Posted 25 Nov 2014 Link to this post

    Hello Shreesh,

    I tried to replicate the issue locally, but to no avail. Here is a screencast of my tests. Also the test project is attached to this message. Could you modify it or let me know if I am missing something?

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top