Search code examples
angularjsdatedatepickerformatiso

Angular JS directive with JQuery Datepicker


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.


Solution

  • 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