Angular JS directive with JQuery Datepicker

Question

I'm totally new to angular js. But I somehow managed to integrate a jQuery UI datepicker in my Angular JS project. But now I want to format the date picked by the jQuery datepicker into ISO date format which I'm not being able to do. Here is my code.

HTML

<input type="text" ng-model="event.when.start" datetime-picker>

ANGULAR Controller

myApp.directive('datetimePicker', function() {
   return {
        require : 'ngModel',
        link : function (scope, element, attrs, ngModel) {
            $(function(){
                element.datetimepicker({
                    dateFormat:'yy-mm-dd',
                    minDate: 0,
                    yearRange: '1920:2012',
                    minute: 0,
                    stepMinute: 15,
                    onSelect:function (dateText, inst) {
                        var dt = new Date(dateText);
                        alert(dt.toISOString());
                        ngModel.$setViewValue(dt.toISOString());
                        scope.$apply();
                    }
                });
            });
        }
    }
});

SCREENSHOT

enter image description here

Note*: I'm being able to alert the value though.

Try this post example freakyjolly.com/…

Code Spy
– Code Spy

2018-05-16 11:50:29 +00:00
Commented May 16, 2018 at 11:50 — Code Spy
– Code Spy, Commented May 16, 2018 at 11:50

SFernando · Accepted Answer · 2015-07-05 17:29:18Z

2

simply as below

myapp.controller('myctrl',function myctrl ($scope){
    $scope.event = {when : {start : ''}}
    $scope.event.when.start = new Date();
}).

    myApp.directive('datetimePicker', function() {
       return {
            require : 'ngModel',
            link : function (scope, element, attrs, ngModel) {
                $(function(){
                    element.datetimepicker({
                        minDate: 0,
                        yearRange: '1920:2012',
                        minute: 0,
                        stepMinute: 15,
                        onSelect:function (dateText, inst) {

                            scope.$apply(function(){
                               scope.event.when.start = new Date(dateText);
                            });
                        }
                    });
                });
            }
        }
    });

don't use dateFormat:'yy-mm-dd', if you need ISO Date

edited Jul 5, 2015 at 17:29

answered Jul 5, 2015 at 13:57

SFernando

1,12412 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheManish Over a year ago

thank you for the answer @bews99. It works! :) but for that i need to click twice on the datepicker. Is it possible to format the date when i focus on that input field.

TheManish Over a year ago

I edited my comment above. As i said, it is working but i need to click twice on the date of datepicker, to make it work.

TheManish Over a year ago

my project requires lots of other js and css. I'm not being able to put it in jsfiddle. is there any other way?

SFernando Over a year ago

updated answer.check wrap your code inside scope.$apply

TheManish Over a year ago

still not working as required @bews99 :( Actually, when i focus on input field, the datepicker automatically fills up the field with the default now time. Which I want it to be filled with ISO formatted datetime. Could you please help me with that. I heartly appreciate your help.

|

Collectives™ on Stack Overflow

Angular JS directive with JQuery Datepicker

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related