ngComboDatePicker

Select dates with combo boxes

ngComboDatePicker is an AngularJS 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.
And if you use Angular 4+ (current directive works only on Angular 1.x), you should check ngx-combo-datepicker.

Usage

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

Attributes

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. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute ngModel instead. ngMinDate | A string representing the minimum date that can be picked. By default the minimum date is 100 years before the current date. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute ngMinModel instead. ngMaxDate | A string representing the maximum date that can be picked. By default the maximum date is the current date. Note that this value is read only once, when loading the component, so if you plan to change this value dynamically, then you should use the attribute ngMaxModel instead. ngMinModel | A Date object indicating the minimum date that can be picked. By default the minimum date is 100 years before the current date. ngMaxModel | A Date object indicating the maximum date that can be picked. By default the maximum date is the current date. 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. 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. ngDisabled | A boolean, or an array of three booleans, indicating if the combo boxes should be rendered as disabled. ngYearOrder | A string indicating if the years must be sorted in "ascending" or "descending" order. ngPlaceholder | A string with the placeholders for the year, month and date combo boxes (in that order), separated by comma. ngPlaceholderEnabled | A boolean that allows to enable or disable the placeholder at runtime. ngRequired | A boolean indicating if the component should be considered invalid if any of his combo boxes is empty. ngChange | A function invoked when the model is updated.

License

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