ngComoDatePicker | Angular directive to select dates using combo boxes

ngComboDatePicker module

ngComboDatePicker

Stars : 10

Forks : 10

Created by jfmdev

Demo Download GitHub

Notice: this project has been archived due to AngularJS reaching end of life.

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:

NameDescription
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.
ngDateA 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.
ngMinDateA 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.
ngMaxDateA 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.
ngMinModelA Date object indicating the minimum date that can be picked. By default the minimum date is 100 years before the current date.
ngMaxModelA Date object indicating the maximum date that can be picked. By default the maximum date is the current date.
ngTimezoneA 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.
ngMonthsA string with the names of the twelve months, separated by comma.
ngOrderA 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".
ngAttrsDateA JSON object with the attributes (such as class or style) to add to the select element for the date.
ngAttrsMonthA JSON object with the attributes (such as class or style) to add to the select element for the month.
ngAttrsYearA JSON object with the attributes (such as class or style) to add to the select element for the year.
ngDisabledA boolean, or an array of three booleans, indicating if the combo boxes should be rendered as disabled.
ngYearOrderA string indicating if the years must be sorted in "ascending" or "descending" order.
ngPlaceholderA string with the placeholders for the year, month and date combo boxes (in that order), separated by comma.
ngPlaceholderEnabledA boolean that allows to enable or disable the placeholder at runtime.
ngRequiredA boolean indicating if the component should be considered invalid if any of his combo boxes is empty.

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

Javscript

Javascript plugin

Angular-js