ADM-dateTimePicker

Pure AngularJs dateTimePicker

Homepage

Module License: MIT

Added by: Mehrshad Teimouri

GitHub

Repository

amirkabirdataminers/adm-datetimepicker

Stats

Stars: 206

Watchers: 206

Forks: 80

Module Description

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


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>

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>

Module stats last updated: 2017-11-26 15:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!