This is a migrated thread and some comments may be shown as answers.

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

4 Answers 281 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Mathijs
Top achievements
Rank 1
Mathijs asked on 16 Jan 2014, 11:07 AM
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

4 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 Jan 2014, 09:29 AM
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!
0
Mathijs
Top achievements
Rank 1
answered on 29 Jan 2014, 10:13 AM
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.
0
Mihai
Telerik team
answered on 29 Jan 2014, 12:10 PM
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!
0
Mathijs
Top achievements
Rank 1
answered on 29 Jan 2014, 01:59 PM
Thanks!
It works in my application now.
Tags
Date/Time Pickers
Asked by
Mathijs
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Mathijs
Top achievements
Rank 1
Mihai
Telerik team
Share this question
or