jQuery UI Datepicker AngularJS Directive using Min Max Options

In an Angularjs project, if you are trying to add a datepicker having all features like MinDate MaxDate etc, you will hardly find any module which is performance efficient, bug-free and is requirement friendly like jQuery UI datepicker.

So, If you are looking to use jQuery Datepicker as a directive in your AngularJS project, then believe me at present it will be a great option available which is fast, healthy and powerpack with huge options.

here I am going to share with you datepicker directive with basic options only like MinDate, MaxDate and default date, But as per requirement you can follow the same procedure to add more option in the directive.

Libraries required:

You will need to add jQuery and jQuery UI with AngularJs to use this directive. We are using datepicker() method of jQuery UI.

Visit demo page here

    angular.module('freakyapp', [])
    .directive("datepicker", function () {
        return {
            restrict: "A",
            require: "ngModel",
            scope: {
                ngModel: "=",
                minDate: "=",
                maxDate: "="
            },
            link: function (scope, elem, attrs, ngModelCtrl) {


                var updateModel = function (dateText) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(dateText);
                    });
                };
                var options = {
                    dateFormat: "dd/mm/yy",
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "1900:Y",                    
                    onSelect: function (dateText) {
                        updateModel(dateText);
                        this.focus();
                    },
                    onClose: function (ele) {
                        this.blur();
                    },

                    defaultDate: new Date() 

                };

                scope.$watch('maxDate', function (newValue, oldValue) {
                    $(elem).datepicker('option', 'maxDate', newValue);
                })

                scope.$watch('minDate', function (newValue, oldValue) {
                    $(elem).datepicker('option', 'minDate', newValue);
                    $(elem).datepicker('option', 'defaultDate', newValue);
                })

                elem.datepicker(options);
            }
        }
    });

Directive above is using event handling by binding a watch listener for min and max dates to make it work with AngularJs life cycle.

Full code snippets used in the demo page.

Script:

  angular.module('freakyapp', [])
  .controller('freakyDatePickerCntrl',['$scope',function($scope){

	// Initialization of value for datepicker
	$scope.defaultDate = "08/05/2018";
	$scope.MinDate = "08/05/2018";
	$scope.MaxDate = "15/08/2018";
	
	
	$scope.dateChanged = function(){
		alert("Date Changed to : "+$scope.defaultDate);
	}
	
	
  }])
  .directive("datepicker", function () {
        return {
            restrict: "A",
            require: "ngModel",
            scope: {
                ngModel: "=",
                minDate: "=",
                maxDate: "="
            },
            link: function (scope, elem, attrs, ngModelCtrl) {


                var updateModel = function (dateText) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(dateText);
                    });
                };
                var options = {
                    dateFormat: "dd/mm/yy",
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "1900:Y",                    
                    onSelect: function (dateText) {
                        updateModel(dateText);
                        this.focus();
                    },
                    onClose: function (ele) {
                        this.blur();
                    },

                    defaultDate: new Date() 

                };

                scope.$watch('maxDate', function (newValue, oldValue) {
                    $(elem).datepicker('option', 'maxDate', newValue);
                })

                scope.$watch('minDate', function (newValue, oldValue) {
                    $(elem).datepicker('option', 'minDate', newValue);
                    $(elem).datepicker('option', 'defaultDate', newValue);
                })

                elem.datepicker(options);
            }
        }
    });

Style:

  .date-wrap{
		margin: auto;
		width: 100%;
		text-align: center;
		font-size: 40px;
		margin-top: 10%;
  }
  .date-wrap input{
		text-align: center;
		font-size: 40px;
		width: 220px;
  }

HTML:

<body ng-app="freakyapp"  ng-controller="freakyDatePickerCntrl">
		<div class="date-wrap">  
			<p>Date: 
			<input type="text" 
			datepicker 
			ng-model="defaultDate" 
			min-date="MinDate" 
			max-date="MaxDate" 
			ng-change="dateChanged()"
			></p>
		</div> 
</body>