Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

jeDate V6.5.0 是一款原生JS开发的不依赖任何第三方库大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含单双面板、区域选择、多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！

Stars: ✭ 433 (+77.46%)

Mutual labels: datepicker, datetimepicker

Vue Datetime

Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

Stars: ✭ 928 (+280.33%)

Mutual labels: datepicker, datetimepicker

Datetimepicker

⭐️🎉一个简约、漂亮的日期时间选择器，支持全方位自定义UI

Stars: ✭ 378 (+54.92%)

Mutual labels: datepicker, datetimepicker

Datetimepicker

This is a custom android holo datepicker timepicker

Stars: ✭ 56 (-77.05%)

Mutual labels: datepicker, datetimepicker

vue-datetime-picker

vue-datetime-picker / vue时间日期选择器

Stars: ✭ 16 (-93.44%)

Mutual labels: datepicker, datetimepicker

Pickerjs

⚠️ [Deprecated] No longer maintained. JavaScript date time picker.

Stars: ✭ 299 (+22.54%)

Mutual labels: datepicker, datetimepicker

Angular Bootstrap Datetimepicker

Native Angular date/time picker component styled by Twitter Bootstrap

Stars: ✭ 1,289 (+428.28%)

Mutual labels: datepicker, datetimepicker

Ng2 Datetime

Datetime picker plugins wrapper for Angular2+

Stars: ✭ 165 (-32.38%)

Mutual labels: datepicker, datetimepicker

View All Similar Projects ➔

ADM-dateTimePicker

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

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

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>

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 244

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (77) 🔗