DatePicker format angular

9 posts, 0 answers
  1. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 26 Aug 2014 Link to this post

    Hi,
    I am having some trouble formatting dates that come from a web api as MM/dd/yyyy. When using this format I am not able to bind the date, however other formats such as yyyy-MM-dd work just fine.

    Here is my view:
    <input name="enddate" data-kendo-date-picker data-k-format="'MM/dd/yyyy'" data-ng-model="trip.EndDate" data-k-ng-model="trip.EndDate" required>

    When the promise returns from the web api if I set the date to the exact date that gets returned the above format works: i.e: $scope.trip.EndDate = "2015-07-11T00:00:00"

    Any ideas what I might be missing?

    Thanks,
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 28 Aug 2014 Link to this post

    Hello Claudio,

    The problem comes from the fact that the widget will expect a date object and you are setting the date as a string. Using new Date() to format the date seems to be working:

    http://dojo.telerik.com/eDAxO

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 28 Aug 2014 Link to this post

    Hi Kiril,
    I am not setting the date as a string, I was just giving an example where the formatting works. However when I just assign the json object that comes from the API (the property is a DateTime in my API model) to the js bound object the formatting does not.

    i.e.: $scope.trip.EndDate = "2015-07-11T00:00:00" --- works
           $scope.trip = data --- k-format='yyyy-MM-dd' works, but k-format='MM/dd/yyyy' does not work

    I am getting "Failed to load snippet" when trying to bring up the link you posted.

    Thanks,
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 Aug 2014 Link to this post

    Hello Claudiu,

    I moved the example to jsBin, so please check it on the following link:

    http://jsbin.com/jemuz/1/edit

    If this is not what you are looking for, please change the snippet in order to represent the issue that you are facing and we will take a look.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 18 Sep 2014 in reply to Kiril Nikolov Link to this post

    This sort of works, although I see several issues with this approach:
    1. If I have an object that has several date properties I have to cast each and every one of them to a date - any reason the control does not support the MM/dd/yyyy out of the box just like it does with the dd-MM-yyyy one?
    2. Dealing with timezones - how would I go about ignoring the timezone?

    Thanks,
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 19 Sep 2014 Link to this post

    Hello Claudiu,

    The widget supports MM/dd/yyyy as shown in the code snippet that I provided you with in my previous response.

    As for the timezone questions - you can convert all days to UTC, so you will not need to convert between timezones.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 19 Sep 2014 in reply to Kiril Nikolov Link to this post

    I think I got it working now, thanks.

    How do you go about rebinding a min/ max value. I have tried setting k-options and k-rebind, however something isn't quite right with my code:

    http://jsbin.com/qinubakumucu/4/edit

    You will notice that changing the value of the first datepicker turns the second datepicker into a textbox.

    Thanks,
  9. cp
    cp avatar
    44 posts
    Member since:
    Oct 2012

    Posted 19 Sep 2014 in reply to cp Link to this post

    Also please note that when both k-ng-model and ng-model use the same property the datepicker becomes 'readonly' - when they are different one can type in a date just fine.
  10. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 23 Sep 2014 Link to this post

    Hello Claudiu,

    Here is an example on how to change max/min runtime:

    http://dojo.telerik.com/icuZ

    As for using both ng-model na k-model for the same property - this is not supported, in general does not make really sense to have both of them bound to the same property.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready