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.
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.