input type="date" HTML5 for firefox with angular

Question

I have HTML5 input fields with type="date":

<div>
    Start Date
    <input id ="ui-datepicker-start" type="date" ng-model="startDate"
           ng-change="updateStartDate(startDate)" value="{{ date | date: 'yyyy/MM/dd' }}" />
    End Date
    <input id="ui-datepicker-end" type="date" ng-model="endDate"
           ng-change="updateEndDate(endDate)" value="{{ date | date: 'yyyy/MM/dd' }}" />
</div>

In Firefox html5 datepickers don't work correctly, they are input type="text" only. I added code for other browsers (which are not support input type="date"):

<script>
    if ($('[type="date"]').prop('type') != 'date') {
        $('[type="date"]').datepicker();
    }
</script>

Now when I run app, I can set date by jquery datepicker(). But now I have a problem. When I change 'start date' and 'end date', they don't call the functions on angular ng-change (ng-change="updateStartDate(startDate)" and ng-change="updateEndDate(endDate)"). How to do it? How to bind changing input dates on angular ng-change functions? Thanks!!!

U have to bind the change function while initialize datepicker @Hennadii Feshchuk. — Sreemat
– Sreemat, Commented Jan 24, 2017 at 10:30
add onchange="angular.element(this).scope().updateEndDate(this)" in your input, — Ebin Manuval
– Ebin Manuval, Commented Jan 24, 2017 at 10:38

Ramesh Rajendran · Accepted Answer · 2017-01-24 10:48:58Z

Such complex UI components need to be wrapped into a directive to maintain a model data binding

You can go with angular directive jqdatepicker instead of Jquery datepicker and you can get the new value by using Rscope.watch //html

<input type="date"  ng-model="startDate"  jqdatepicker />
<br/>
Old : {{startDate}}
<br/>
New : {{NewDate}}

//controller

 var datePicker = angular.module('app', []);

datePicker.controller('DatepickerController', ['$scope', function($scope) {
  $scope.startDate = new Date();
  $scope.$watch("startDate", function(newValue, oldValue) {  
  $scope.startDate=oldValue;
  $scope.NewDate=newValue;
});
}]);

// Directive

   datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

Jsfiddler

Collectives™ on Stack Overflow

input type="date" HTML5 for firefox with angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related