AmirkabirDataMiners / ADM-dateTimePicker

Pure AngularJs dateTimePicker
http://amirkabirdataminers.github.io/ADM-dateTimePicker
MIT License
244 stars 93 forks source link
adm adm-datetimepicker adm-dtp angularjs datepicker datetimepicker gregorian-calendar jalali-calendar persian-calendar

ADM-dateTimePicker

Version   Version   AngularJs   License MIT

Pure AngularJs Gregorian and Jalali smart dateTimePicker by ADM | Amirkabir Data Miners

ADM-dateTimePicker cover

Updates in V1.2.0

Updates in V1.1.9

Updates in V1.1.6

Updates in V1.1.0


Demo

See ADMdtp live HERE.


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="https://github.com/AmirkabirDataMiners/ADM-dateTimePicker/blob/master/css/ADM-dateTimePicker.css" />
        <script src="https://github.com/AmirkabirDataMiners/ADM-dateTimePicker/raw/master/js/angular.min.js"></script>
        <script src="https://github.com/AmirkabirDataMiners/ADM-dateTimePicker/raw/master/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>

Quick look

Name Type Default Description
watchingOptions Boolean false Whether watch options for changes or not"
calType String 'gregorian' 'gregorian' & 'jalali' are available
dtpType String 'date&time' 'date&time' & 'date' are available. (expect 'time' in next version)
default Number, String, Date -- Initial date can be Number(UNIX), String or Date and also word 'today' for auto set current date
disabled Array -- Disable specific days with format of String, Date and UNIX, or days with pattern of 'i+[NUM]' and '[NUM]d+[NUM]
freezeInput Boolean false Freeze input to prevent user changing text
smartDisabling Boolean true Whether change Sunday from Gregorian calendar to Friday in Jalali calendar by switching calendar type or not
format String 'YYYY/MM/DD hh:mm' Any combination of YYYY, YY, MM, DD, hh, mm. (e.g. YY/MM/DD, MM-DD (hh:mm))
multiple Boolean true Whether user can change calendar type or not
autoClose Boolean false Closing ADMdtp on selecting a day
transition Boolean true Transition on loading days
gregorianStartDay Number 0 0 for Sunday, 1 for Monday, ...
minuteStep Number 1 Each step for increasing or decreasing minutes
gregorianDic Object see on examples Changing title, monthsNames, daysNames and todayBtn for Gregorian Calendar
jalaliDic Object see on examples Changing title, monthsNames, daysNames and todayBtn for Jalali Calendar
zIndex Number 9 z-index of datePicker popup

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>

Disabling days

Disable specific days

<!-- it accept both unix and string date -->
<adm-dtp ng-model="date" options="disabled:['2016/1/20', 1453408200000]"></adm-dtp>

Disable with pattern

Currently two types of patterns are availble:

Inverse disabling:

putting Exclamation mark (!) at the begining of the pattern will inverse disabling pattern:

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>

Full data

Beside ngModel you can access to date full details throw full-data attribute.

<adm-dtp ng-model="date" full-data="date_details"></adm-dtp>

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

<!-- mindate & maxdate accept both unix and string date -->
<adm-dtp ng-model="date" options="{default:'2015/12/15'}" mindate="1449866902553" maxdate="'2015/12/18'"></adm-dtp>

Dynamic limitation

No need to destroy datepickers anymore!

<adm-dtp ng-model="date1" full-data="date1_detail" maxdate="{{date2_detail.unix}}"></adm-dtp>
<adm-dtp ng-model="date2" full-data="date2_detail" mindate="{{date1_detail.unix}}"></adm-dtp>
<adm-dtp ng-model="date3" mindate="{{date1_detail.unix}}" maxdate="{{date2_detail.unix}}"></adm-dtp>

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>

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

Gregorian Start Day

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

Events

Show / Hide

<adm-dtp ng-model="date" on-open="open()"></adm-dtp>
<adm-dtp ng-model="date" on-close="close()"></adm-dtp>

Change / Select

<!-- Note 1: you can access to the selected date full details in below functions -->
<!-- Note 2: functions names are optional but input name must be 'date' -->

<!-- event on any change occurs on input -->
<adm-dtp ng-model="date" on-change="change(date)"></adm-dtp>
<!-- event on selecting a day -->
<adm-dtp ng-model="date" on-datechange="dateChanged(date)"></adm-dtp>
<!-- event on changing the time -->
<adm-dtp ng-model="date" on-datechange="timeChanged(date)"></adm-dtp>