jquery datepicker on angular with 2 different formats

Question

I have a jquery ui datepicker on angular app,

It is defined like this:

app.directive('dwdatepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    },
                    dateFormat: 'dd/mm/yy',
                    changeYear: true,
                    yearRange: "-50:+0"
                });
            });
        }
    }
});

Now I want to store the value in $modelValue on yyyy-MM-dd format, and to show the value to the user on dd/mm/yy format.

How can I make it?

How to combine the capabilities of jquery ui datepicker with the capabilities of angular?

Thank you.

Answer 1

In the onSelect function you could do either of the following:

onSelect:function (date) {
   scope.$apply(function () {
      var isoDate = $.datepicker.formatDate('yy-mm-dd', $.datepicker.parseDate('dd/mm/yy', date));
      ngModelCtrl.$setViewValue(isoDate);
   });
}

Or

onSelect:function (date, ) {
   scope.$apply(function () {
      var isoDate = $.datepicker.formatDate('yy-mm-dd',$(this).datepicker('getDate'));
      ngModelCtrl.$setViewValue(isoDate);
   });
}

Haven't used jQuery in a while so syntax could be wrong.