Pure AngularJs
Gregorian and Jalali
smart dateTimePicker






Implementation steps

Step 1: Install ADM-dateTimePicker

npm install adm-dtp bower install adm-dtp

Step 2: Include the files in your app

<!doctype html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="css/ADM-dateTimePicker.css" /> <script src="js/angular.min.js"></script> <script src="js/ADM-dateTimePicker.min.js"></script> ... </head> <body> ... </body> </html>

Step 3: Inject the ADM-dateTimePicker module

var app = angular.module('myApp', ['ADM-dateTimePicker']);

Step 4: Add the adm-dtp directive to a DOM element

<adm-dtp ng-model='date'></adm-dtp>

Options

Set options for entire of app

app.config(['ADMdtpProvider', function(ADMdtp) { ADMdtp.setOptions({ calType: 'gregorian', format: 'YYYY/MM/DD hh:mm', default: 'today', ... }); }]);

Set options for each directive

<!-- pass options from controller --> <adm-dtp ng-model='date1' options='date1_options'></adm-dtp> <!-- or write them inline --> <adm-dtp ng-model='date2' options='{calType: "jalali", format: "YYYY/MM/DD", default: 1450197600000}'></adm-dtp>

Example:

Gregorian - Date: YY-MM-DD Time: (hh:mm)
Jalali - YYYY/MM/DD

Quick look

Name Type Default Description
{{item.name}} {{item.type}} {{item.default}}

Custom input template

You can put custom input template inside 
<adm-dtp></adm-dtp>
but with unwanted limits.

<!-- all optional actions --> <adm-dtp ng-model='date' full-data='date_details'> <!-- fully access to 'date' and 'date_details' parameters --> <!-- input is optional too, but must use in this format --> <input type='text' ng-model='date' dtp-input /> <!-- attributes name are important, not tags name --> <button dtp-open > Open calendar </button> <button dtp-close > Close calendar </button> <button dtp-toggle > Toggle calendar </button> <button dtp-destroy > Destroy calendar </button> </adm-dtp>

Example:


Disabling days

Disable specific days

Example:


Disable with pattern

Currently two types of patterns are availble:

  • Days in a week: 
    i+[NUM]
    • i
      -> will disable all Sundays in Gregorain calendar or Saturdays in Jalali calendars
    • i+6
      -> will disable all Saturdays in Gregorain calendar or Fridays in Jalali calendars
    • ...
  • Days in a month: 
    [NUM]d+[NUM]
    • d+1
      -> will disable the second day of all months
    • 2d
      -> will disable the even days of all months
    • 2d+1
      -> will disable the odd days of all months
    • ...

Inverse disabling:

putting Exclamation mark (!) at the begining of the pattern will inverse disabling pattern: 
  • !i+6
    -> just Saturdays in Gregorain calendar or Fridays in Jalali calendars are available
  • !2d+1
    -> it's exactly like 
    2d

Combine patterns:

patterns of the same type can be combine with Ampersand (&).
mention that 
['2d+1', '7d']
and 
['2d+1&7d']
are equal, but 
['!2d+1', '!7d']
and 
['!2d+1&7d']
are completely differents.

Smart disabling:

i
in Gregorian calendar will disable Sundays (weekend) that is equal to Fridays (weekend) in Jalali calendar.
option 
smartDisabling: true
change Sunday from Gregorian calendar to Friday in Jalali calendar by switching calendar type,
but 
smartDisabling: false
makes no different.

<adm-dtp ng-model='date' options="disabled:['2016/1/20', '!i&i+1', '15d+2']"></adm-dtp>

Example:

disable weekends - 
i&i+6
only weekends - 
!i&i+6

Full data

Beside ngModel you can access to date full details throw 
full-data
attribute.
date_details
contains following parameters:
{ formated: "2015/12/15", gDate: 2015-12-15T16:40:00.000Z, //gDate is Date format of selected date in Gregorian calendar unix: 1450197600000, year: 2015, month: 12, day: 15, hour: 20, minute: 10, minDate: null, maxDate: null, calType: "gregorian", format: "YYYY/MM/DD" }

Smart range picker

Static limitation

Example:

Dynamic limitation

No need to destroy datepickers anymore!

Example:

From:
To:
From - To:

Disabling ADMdtp

<!-- disable permanently --> <adm-dtp ng-model='date' disable='true'></adm-dtp> <!-- disable dynamicly --> <adm-dtp ng-model='date1' ></adm-dtp> <adm-dtp ng-model='date2' disable='{{!date1}}'></adm-dtp>

Example:

Select date to enable next input
I'm {{(date7)?'enable':'disable'}}

Dictionary

{ calType:'gregorian', multiple:false, gregorianDic: { title: 'Grégorien', monthsNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], daysNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], todayBtn: "Aujourd'hui" } }

Example:

The gregorian calendar in French

Gregorian Start Day

<!-- 0 -> Sunday 1 -> Monday ... 6 -> Satudary --> <adm-dtp ng-model='date' options='{gregorianStartDay: 1}'></adm-dtp>

Example:

Calendars in Europe that start with Monday instead of Sunday

Events

Show / Hide

Change / Select

Example:


Messages:

{{item}}