adm-dtp

v1.2.0

Published

2 years ago

Pure AngularJs Gregorian and Jalali smart dateTimePicker

Downloads

3,151

0High
0Medium
0Low

mete-30

ADMdtp angular pure gregorian jalali persian datepicker sass amirkabirdataminers adm

ADM-dateTimePicker

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

ADM-dateTimePicker cover

Updates in V1.2.0

Now popup is appending to body instead of main element to fix some overflow & z-index issues
Add translate option. so days & months names are no more constants
Add option to watch options for changes
Add option to set start day of week. (setting Monday instead of Sunday for some calendars in Europe)
Add option to set minutes step
Now popup will close by hitting tab
Add ng-required support
Fix the bug that causes high cpu usage on Safari
Fix removeIcon bug

Updates in V1.1.9

Rediuce stylesheet size by 70%
Fix unused font dependency

Updates in V1.1.6

Fix bug for converting Gregorian dates after 2017/1/1
Prevent today button from posting form
Fix datePicker input stucking by pasting date

Updates in V1.1.0

Remove all other dependencies. (Bootstrap, Glyphicon, Fonts)
Add month and year quick select.
Date format is now fully customize with any combination of YYYY, YY, MM, DD, hh, mm.
Add custom input template option inside directive.
Add option to freeze input to prevent user from changing text.
Add option to hide time from dateTimePicker.
Add option to auto select current day, by puting 'today' in default parameter.
Fix bugs on IE9.

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

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

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:

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>

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>