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

<adm-dtp></adm-dtp>

<!-- 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: {{date16}}

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:

!i+6 -> just Saturdays in Gregorain calendar or Fridays in Jalali calendars are available

-> just Saturdays in Gregorain calendar or Fridays in Jalali calendars are available !2d+1 -> it's exactly like 2d

Combine patterns:

['2d+1', '7d']

['2d+1&7d']

['!2d+1', '!7d']

['!2d+1&7d']

Smart disabling:

i

smartDisabling: true

smartDisabling: false

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

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

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

You can put custom input template insidebut with unwanted limits.puttingat the begining of the pattern will inverse disabling pattern:patterns of the same type can be combine withmention thatandare equal, butandare completely differents.in Gregorian calendar will disable Sundays (weekend) that is equal to Fridays (weekend) in Jalali calendar.optionchange Sunday from Gregorian calendar to Friday in Jalali calendar by switching calendar type,butmakes no different.