ngComboDatePicker - An Angular directive to select dates using combo boxes

Introduction

ngComboDatePicker is an Angular directive to select dates using combo boxes. In order to use this directive you must:

1) Include the library (after including Angular) in the header of your HTML files.

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ngComboDatePicker.min.js"></script>

2) Add ngComboDatePicker as a dependency when declaring your Angular's app

var app = angular.module('myApp',['ngComboDatePicker']);

3) Add the directive in your HTML code.

<ng-combo-date-picker ng-model="myDate"></ng-combo-date-picker>

Examples

Basic usage

The simpliest usage of the directive is to declare it using only the ng-model attribute. This attribute is mandatory, and it's used to store the date selected by the user.

<ng-combo-date-picker ng-model="basic"></ng-combo-date-picker>

Set initial value

By default, the directive takes the current date as the initial date. However this can be changed by either initializing the variable assigned to ng-model or to using the attribute ng-date.

$scope.set = new Date('2012-08-03');

<ng-combo-date-picker ng-model="set"></ng-combo-date-picker>

<ng-combo-date-picker ng-model="set2" ng-date="2013-09-04"></ng-combo-date-picker>

$scope.init = new Date('2014-10-05');

<ng-combo-date-picker ng-model="set3" ng-date="{{ var='{'+'{ init.toString() }'+'}'; }}"></ng-combo-date-picker>

Change order of combo boxes

By default, the directive first shows the combo box for the day, then combo box for the month and finally the one for the year. However this can be changed by using the attribute ng-order.

<ng-combo-date-picker ng-model="change1" ng-order="ymd"></ng-combo-date-picker>

<ng-combo-date-picker ng-model="change2" ng-order="mdy"></ng-combo-date-picker>

<ng-combo-date-picker ng-model="change3" ng-order="dmy"></ng-combo-date-picker>

Define minimum and maximum dates

By default, the directive let to choose any date in the last 100 years. However this can be changed by using the attributes ng-max-date and ng-min-date.

<ng-combo-date-picker ng-model="range" ng-min-date="1800-01-01" ng-max-date="1900-12-31"></ng-combo-date-picker>

$scope.min = new Date('2014-09-07');
$scope.max = new Date('2016-09-07');

<ng-combo-date-picker ng-model="range2" ng-min-model="min" ng-max-model="max"></ng-combo-date-picker>

Change strings for months

By default, the combo box for the month is filled with the first three caracters of the name of the months in English. However, the values of the combo box can be customized by using the attribute ng-months.

<ng-combo-date-picker ng-model="namesEs" ng-months="Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre"></ng-combo-date-picker>

$scope.names = "Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Août,Septembre,Octobre,Novembre,Décembre";

<ng-combo-date-picker ng-model="namesFr" ng-months="{{ var='{'+'{ names }'+'}'; }}"></ng-combo-date-picker>

Add attributes

You can add attributes to each element (such as the style or the class) by using the attributes ng-attrs-date, ng-attrs-month and ng-attrs-year.

<ng-combo-date-picker ng-model="attrs" ng-attrs-date='{"style": "color:red"}' ng-attrs-month='{"style": "color:green"}' ng-attrs-year='{"style": "color:blue"}'></ng-combo-date-picker>

<ng-combo-date-picker ng-model="classes" ng-attrs-date='{"class": "form-control"}' ng-attrs-month='{"class": "form-control"}' ng-attrs-year='{"class": "form-control"}'></ng-combo-date-picker>

Set sort order for years

By default, the combo box for years is sorted in ascending order, however you can use the attribute ng-year-order to sort the values in descending order.

<ng-combo-date-picker ng-model="desc" ng-year-order="desc"></ng-combo-date-picker>

Define timezone

By default, the client's timezone is used when parsing dates defined as strings or as integers (in the attributes ng-date, ng-max and ng-min). However, this can be changed by using the attribute ng-timezone.

<ng-combo-date-picker ng-model="timezone1" ng-date="2000-01-01" ng-timezone="-23">
</ng-combo-date-picker>

<ng-combo-date-picker ng-model="timezone2" ng-date="2000-01-01" ng-timezone="0">
</ng-combo-date-picker>

<ng-combo-date-picker ng-model="timezone3" ng-date="2000-01-01" ng-timezone="23">
</ng-combo-date-picker>

Set placeholders

You can define a placeholder for each combo box by using the attribute ng-placeholder.

<ng-combo-date-picker ng-model="placeholder" ng-placeholder="Year,Month,Date"></ng-combo-date-picker>

Form validation

If you want to use the form validation features of Angular, you have two alternatives:

You can use the attributes ng-attrs-date, ng-attrs-month and ng-attrs-year in order to define the name attribute of each combo box.

<form name="myForm" novalidate>
    <ng-combo-date-picker ng-model="formv" ng-attrs-date='{"name": "myDate"}' ng-attrs-month='{"name": "myMonth"}' ng-attrs-year='{"name": "myYear"}'></ng-combo-date-picker>
</form>

Or you can use the attributes ng-required and name on the directive itself.

<form name="myOtherForm" novalidate>
    <ng-combo-date-picker ng-model="requiredDate" name="myDate" ng-required="true"></ng-combo-date-picker>
</form>

Disable combo boxes

If you want to disable the combo boxes dinamically, you can use the attribute ng-disabled which parameter can be either a boolean or an array of three booleans.

<form name="myForm" novalidate>
    <ng-combo-date-picker ng-model="myDate" ng-disabled="disableFlag"></ng-combo-date-picker>
    <input type="checkbox" ng-model="disableFlag"/> Disable combo boxes
</form>

<form name="myForm" novalidate ng-init="disableFlags = [false, false, false]">
    <ng-combo-date-picker ng-model="myDate" ng-disabled="disableFlags"></ng-combo-date-picker></p>
    <input type="checkbox" ng-model="disableFlags[0]"/> Disable date
    <input type="checkbox" ng-model="disableFlags[1]"/> Disable month
    <input type="checkbox" ng-model="disableFlags[2]"/> Disable year
</form>