Angular Datepicker for your input element

In this post I am going to share simple angularjs based library to generate a datepicker on your input element. Angular datepicker is an angularjs directive that generates a datepicker calendar on your input element.
Angular datepicker calendar

Libraries

To use the directive, include the Angular Datepicker’s javascript and css files in your web page:

<link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
<script src="src/js/angular-datepicker.js"></script>

HTML

Now Call the directive wherever you want in your html page.

<datepicker>
  <input ng-model="date" type="text"/>
</datepicker>

By default the ng-model will show a Javascript Date() Object inside your input, you can use the options below to set your preferred date format to.



Here are the list of data attribute which you can use to customize the angular datepicker
.

Option Type Default Description
date-set=”” String false Set a default date to show and init datepicker
tip: Do not use same scope for ng-model=”date” and date-set=”{{date}}”, this example is wrong.
tip: If you want to pass a Date Object inside do like this date-set=”{{newDateObject.toString()}}”
tip: Consider that date-set="{{myDate}}" equals to new Date(attr.dateSet), be sure the date you pass inside date-set=”” is always in a correct ISO format, or adjust it based on the browser locale to avoid problems with that.”.
date-format=”” String String(new Date()) Set the date format you want to use, see the list here
tip: Be always sure to use a recognized format, maybe try first of all to pass it through new Date(‘…’) and see if it’s recognized
date-min-limit=”” String false Set a minimum date limit – you can use all the accepted date formats by the javascript new Date()
date-max-limit=”” String false Set a maximum date limit – you can use all the accepted date formats by the javascript new Date()
date-set-hidden=”” String(Boolean) false Set the default date to be shown only in calendar and not in the input field
date-disabled-dates=”” String([Date(), Date(), …]) false Disable specific dates using an Array of dates.
date-enabled-dates=”” String([Date(), Date(), …]) false Enable only the specific dates using an Array of dates.
date-disabled-weekdays=”” String(1, 5, …]) false Disable specific weekdays using an Array of weeks number
date-refocus=”” String(Boolean) false Set the datepicker to re-focus the input after selecting a date
date-typer=”” String(Boolean) false Set the datepicker to update calendar date when user is typing a date, see validation tips
date-week-start-day=”” String(Number) 0 Set the first day of the week. Must be an integer between 0 (Sunday) and 6 (Saturday). (e.g. 1 for Monday)
datepicker-class=”” String(‘class1 class2 class3’) false Set custom class/es for the datepicker calendar
datepicker-append-to=”” String(‘#id’,’.classname’, ‘body’) false Append the datepicker to #id or .class element or to body
datepicker-toggle=”” String(Boolean) true Set the datepicker to toggle its visibility on focus and blur
tip: Best is to use pointer-events: none; on your input if you don’t want the user to toggle the calendar visibility.
datepicker-show=”” String false Trigger the datepicker visibility, if true datepicker is shown if false it is hidden
tip: Do not mix it with datepicker-toggle for a more stable behavior
datepicker-mobile=”” String true Set to false to force override of mobile styles. Especially useful for using desktop-style pagination control in mobile apps.

You can show validation errors simply validating the ngModel, as you would do for any other type of input, for example:

.controller('Ctrl', ['$scope', function ($scope) {
  var liveDate;
 
  $scope.$watch('myDate', function (value) {
    try {
     liveDate = new Date(value);
    } catch(e) {}
 
    if (!liveDate) {
 
      $scope.error = "This is not a valid date";
    } else {
      $scope.error = false;
    }
  });
}]);

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by 720kb, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.