Select dates with combo boxes
ngComboDatePicker is an Angular directive to select dates using combo boxes.
See the live demos and read the docs
If you use the React library, you should check reactComboDatePicker, a fork of this project that uses React instead of Angular.
In order to use this directive:
1) Include the library (located in the source folder of this repository) in the header of your HTML files, after including Angular (v1.4.0 or greater):
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ngComboDatePicker.min.js"></script>Note that, instead of cloning this repository, you can also gee this library usins NPM (
npm install ng-combo-date-picker) or Bower (bower install ngComboDatePicker).
2) Then add ngComboDatePicker as a dependency when declaring your Angular's app:
var app = angular.module('myApp',['ngComboDatePicker']);3) Then include the directive in your HTML code. For example:
<ng-combo-date-picker ng-model="myDate"></ng-combo-date-picker>or
<span ng-combo-date-picker="exp" ng-model="myDate"></span>The ngComboDatePicker directive supports the following attributes:
| Name | Description |
|---|---|
ngModel |
(mandatory) A Date object in which the picked date is going to be stored. This attribute can also be used to define the initial value of the picker. |
ngDate |
A string representing the initial date of the picker. |
ngMinDate |
A string representing the minimum date that can be picked. By default the minimum date is 100 years before the current day. |
ngMaxDate |
A string representing the maximum date that can be picked. By default the maximum date is the current day. |
ngMonths |
A string with the names of the twelve months, separated by comma. |
ngOrder |
A string with the characters "d", "m" and "y" indicating in which order the combo boxes must be displayed. By default, the combo boxes are displayed in the order "dmy". |
ngAttrsDate |
A JSON object with the attributes (such as class or style) to add to the select element for the date. |
ngAttrsMonth |
A JSON object with the attributes (such as class or style) to add to the select element for the month. |
ngAttrsYear |
A JSON object with the attributes (such as class or style) to add to the select element for the year. |
ngYearOrder |
A string indicating if the years must be sorted in "ascending" or "descending" order. |
ngTimezone |
A number indicating the timezone to be used when converting a string or an integer to a date. By default the timezone of the client is used. |
ngPlaceholder |
A string with the placeholders for the year, month and date combo boxes (in that order), separated by comma. |
ngRequired |
A boolean indicating if the component should be considered invalid if any of his combo boxes is empty. |
ngComboDatePicker is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this library, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.