Datepicker with angularjs, how to get the value as Date i.s.o. string

5 posts, 0 answers
  1. Mathijs
    Mathijs avatar
    3 posts
    Member since:
    Jan 2014

    Posted 16 Jan 2014 Link to this post

    Hi,
    I am investigating to use the datepicker in a AngularJs environment.
    The problem I am facing now is that the value of the datepicker I get is a String, not a Date. And I do not want to add code to parse, validate etc.
    In my test, I select a date in the calendar. The value is writen to the model, but as the view shows, its a string, not a Date.

    This is the (significant part of) the test-set:

    The view (kendoui-view_datepicker.html)
    <h1>Test of the datepicker</h1>
    <input kendo-date-picker data-ng-model="data.testDate" k-options="datePickerConfig"/>
    Model date: {{data.testDate}} analyses: {{analyseDate()}}


    The script (kendoui-angular-app-datepicker.js):
    angular.module('SampleApp', ['ngResource', 'ngRoute', 'kendo.directives']).config(function ($routeProvider)
    {    $routeProvider.when('/', { templateUrl: 'kendoui-view_datepicker.html', controller: HomeCtrl }).otherwise({redirectTo: '/'}); });
    function HomeCtrl($scope)
    {
        $scope.data = {
            testDate: new Date()
        };
        $scope.datePickerConfig = {
            format: "dd-MM-yyyy",
            parseFormats: ["yyyy-MM-dd", "dd/MM/yyyy", "yyyy/MM/dd"],
            footer: "Currently #: kendo.toString(data,'dd-MM-yyyy')#"
        }
        $scope.analyseDate = function () {
            var tp = typeof  $scope.data.testDate;
            return  $scope.data.testDate + " " + tp;
        }
    }

    I attach these files plus a start-up file and the used kendo-angular.js
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Jan 2014 Link to this post

    Hello,

    I am not sure about the case that you described since I was not able to run the pages that you shared. Can you put all of this in a single jsBin example and give point us what exactly is not working so we can try to advise.

    http://jsbin.com/

    Kind Regards,
    Petur Subev
    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. Mathijs
    Mathijs avatar
    3 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Petur Subev Link to this post

    Hi,
    I have created a test set at: http://jsbin.com/UrECUwa/2/edit
    Instructions to use:
    - I used chrome as browser.
    - see the console. It shows the datepicker and below that a field that shows the current date-value. And the result of a function that show the typeof the value. Initially the value is a new Date().
    - select the calender-button and select any date.
    - now the fields show that the result, written to the model, is a string, not a Date. The analyses-function reports this.
  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 29 Jan 2014 Link to this post

    Hi,

    Your example was using an old version of angular-kendo.js.  I pasted the latest code and now it functions properly.  The bug you mentioned was fixed a while back; your scope will now get a Date object, which is the actual value() of the DatePicker widget: http://jsbin.com/UrECUwa/3/

    Best,
    Mihai
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mathijs
    Mathijs avatar
    3 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Mihai Link to this post

    Thanks!
    It works in my application now.
Back to Top
Kendo UI is VS 2017 Ready