Star Fork

HA-DateTimePicker

A Solar, Lunar and Gregorian supported JavaScript date and time picker with no dependencies!

Download

v1.4.2

Basics

Install

Just download the files and include JS, CSS and other resource files in your project

 

To download the files, just click the download button above or use one of these ways:

 

NuGet Package Manager

NuGet is a standard package manager for .NET Applications, It's simplest solution for ASP.NET Web Developers and Visual Studio Developers to install the latest release of package with just type the below command and press enter

install-package hadatetimepicker

NPM Package Manager

NPM is a NodeJS package manager. As its name would imply, you can use it to install node programs. Also, if you use it in development, it makes it easier to specify and link dependencies. type the below command in your Command Prompt or Terminal and press enter

npm i ha-datetimepicker

Bower Package Manager

Bower is a package manager for the web. type the below command in your Command Prompt or Terminal and press enter

bower install ha-datetimepicker

Use

First of all, inlude this line of code in your HTML page head

<link href="ha-datetimepicker.min.css" rel="stylesheet"/>

And this one, before body ending tag

<script type="text/javascript" src="ha-datetimepicker.min.js"/>

Everything is ready! just add data-ha-datetimepicker attribute to your DOMElement and choose the target DOMElement for result value based on CSS selectors

<input type="text" id="datetime" placeholder="Select a date and time" data-ha-datetimepicker="#datetime"/>

Solar Calendar

Make it Solar

If you want use the solar calendar (هجری خورشیدی), first include the HA-SolarDate.min.js file in your webpage.

Put these lines of code before body closing tag

<script type="text/javascript" src="ha-solardate.min.js"/>
<script type="text/javascript" src="ha-datetimepicker.min.js"/>
NOTE: Be sure to include the ha-solardate.min.js before the ha-datetimepicker.min.js

Then add data-ha-dp-issolar attribute to youd DOMElement and make it true

<input type="text" id="solardate" placeholder="Select a date and time" data-ha-datetimepicker="#solardate" data-ha-dp-issolar="true" />

Get Solar Result

Want to have a solar result? No matter! use data-ha-dp-resultinsolar attribute

<input type="text" id="solarresult" placeholder="Select a date and time" data-ha-datetimepicker="#solarresult" data-ha-dp-issolar="true" data-ha-dp-resultinsolar="true" />

Lunar Calendar

Make it Lunar

If you want use the lunar calendar (هجری قمری), first include the HA-LunarDate.min.js file in your webpage.

Put these lines of code before body closing tag

<script type="text/javascript" src="ha-lunardate.min.js"/>
<script type="text/javascript" src="ha-datetimepicker.min.js"/>
NOTE: Be sure to include the ha-lunardate.min.js before the ha-datetimepicker.min.js

Then add data-ha-dp-islunar attribute to youd DOMElement and make it true

<input type="text" id="lunardate" placeholder="Select a date and time" data-ha-datetimepicker="#lunardate" data-ha-dp-islunar="true" />

Get Lunar Result

You can have a lunar result too! use data-ha-dp-resultinlunar attribute

<input type="text" id="lunarresult" placeholder="Select a date and time" data-ha-datetimepicker="#lunarresult" data-ha-dp-islunar="true" data-ha-dp-resultinlunar="true" />

Features

Limited Date Range

For limiting the date range, use data-ha-dp-minallowddate and data-ha-dp-maxalloweddate attributes for specifying the minimum allowed date

<input type="text" id="limiteddate" placeholder="Select a date and time" data-ha-datetimepicker="#limiteddate" data-ha-dp-minalloweddate="10/6/2016" data-ha-dp-maxalloweddate="11/6/2017" />

Disable Week Days

If you want to disable some days of week, use data-ha-dp-disabledweekdays attribute.

Use the number of week days to disable them. 1 for Sunday(یکشنبه or الأحد) and 7 for Saturday(شنبه or السبت)

<input type="text" id="weekdays" placeholder="Select a date and time" data-ha-datetimepicker="#weekdays" data-ha-dp-disabledweekdays="1,2,4" />

Force Set Time

Setting the time is necessary? OK, force the user to set the time by making data-ha-dp-forcesettime attribute true

<input type="text" id="forcedsettime" placeholder="Select a date and time" data-ha-datetimepicker="#forcedsettime" data-ha-dp-forcesettime="true" />

Datepicker Only

If you don't need the time, make it disable! Set data-ha-dp-disabletime attribute true

<input type="text" id="justdate" placeholder="Select a date" data-ha-datetimepicker="#justdate" data-ha-dp-disabletime="true" />

Timepicker Only

You may need only the time or you want to select date and time in separate fileds! Set data-ha-dp-timepickeronly attribute true to make the HA-DateTimePicker work as time picker

<input type="text" id="justtime" placeholder="Select a time" data-ha-datetimepicker="#justtime" data-ha-dp-timepickeronly="true" />

Extra Targets

You can send the result to multiple targets in multiple calendars! Set data-ha-dp-extratargets for Gregorian results, data-ha-dp-extrasolartargets for Solar results and data-ha-dp-extralunartargets for Lunar results and pass the target based on CSS selectors

<input type="text" id="justtime" placeholder="Select a date and time" data-ha-datetimepicker="#exTargets" data-ha-dp-extrasolartargets="#exSolartarget" data-ha-dp-extralunartargets="#exLunarTarget" />

The Solar Result

The Lunar Result

Disable OK Button

For immediate return of result in your field make data-ha-dp-disableokbutton attribute true to remove the buttons

<input type="text" id="nobutton" placeholder="Select a date and time" data-ha-datetimepicker="#nobutton" data-ha-dp-disableokbutton="true" />

Disable Animations

W data-ha-dp-disableanimations attribute true to remove the animations

<input type="text" id="noanim" placeholder="Select a date and time" data-ha-datetimepicker="#noanim" data-ha-dp-disableanimations="true" />

Formatted Result beta

For changing the returning result of date and time picker use data-ha-dp-resultformat attribute. use {year} for year, {month} for month, {day} for day, {hour} for hour, {minute} for minute, {ampm} for AM or Pm and if you want to display some text only when time is available put it between {t? and }. ex. {month}/{day}/{year} {t?{hour}:{minute} {ampm}}

<input type="text" id="resultforamt" placeholder="Select a date and time" data-ha-datetimepicker="#resultforamt" data-ha-dp-resultformat="{day} - {month} - {year}" />

Using JavaScript In Process

Instantiate and Display

Want to have more control on HA-DateTimePicker? Use JavaScript!

First instantiate the HaDateTimePicker and pass the target DOMElement or selector of the target(based on CSS selectors)

var hadp = new HaDateTimePicker("#datetime");

And then, whenever you want call the show function to display the datetimepicker

hadp.show();

Change Settings

For changing the settings of HA-DateTimePicker, use options.

Options are as the same as HTML Attributes without data-ha-dp- and are in camelCase

hadp.options.isSolar = true;
hadp.options.resultInSolar = true;
...
NOTE: Be sure to change the options before calling the show function

SelectedDateChanged

Add selectedDateChanged EventListener to the datetimepicker.

<input type="text" id="selecteddatechanged" placeholder="Select a date and time"/> var sdc = new HaDateTimePicker("#selectedDateChanged"); sdc.addEventListener("selectedDateChanged", function() {
alert("Selected Date Changed: " + e.detail.selectedDate);
});
document.getElementById("selecteddatechanged").addEventListener("click", function() {
sdc.show();
});

SelectedTimeChanged

Add selectedTimeChanged EventListener to the datetimepicker.

<input type="text" id="selectedtimechanged" placeholder="Select a date and time"/> var stc = new HaDateTimePicker("#selectedTimeChanged"); stc.addEventListener("selectedTimeChanged", function() {
alert("Selected Time Changed: " + e.detail.selectedTime);
});
document.getElementById("selectedtimechanged").addEventListener("click", function() {
stc.show();
});

PageChanged

Add pageChanged EventListener to the datetimepicker.

<input type="text" id="clocktoggled" placeholder="Select a date and time"/> var pc = new HaDateTimePicker("#clocktoggled"); pc.addEventListener("pageChanged", function() {
alert("Page Changed: " + e.detail.date);
});
document.getElementById("pageChanged").addEventListener("click", function() {
pc.show();
});

ClockToggled

Add clockToggled EventListener to the datetimepicker.

<input type="text" id="pickershow" placeholder="Select a date and time"/> var ct = new HaDateTimePicker("#clocktoggled"); ct.addEventListener("clockToggled", function() {
alert("Clock Toggled: " + e.detail.isClock);
});
document.getElementById("clockToggled").addEventListener("click", function() {
ct.show();
});

PickerShow

Add pickerShow EventListener to the datetimepicker.

<input type="text" id="pickershow" placeholder="Select a date and time"/> var ps = new HaDateTimePicker("#pickershow"); ps.addEventListener("pickerShow", function() {
alert("Picker Showed");
});
document.getElementById("pickershow").addEventListener("click", function() {
ps.show();
});

PickerHide

Add pickerHide EventListener to the datetimepicker.

<input type="text" id="pickerhide" placeholder="Select a date and time"/> var ph = new HaDateTimePicker("#pickerhide"); ph.addEventListener("pickerHide", function() {
alert("Picker Hided");
});
document.getElementById("pickerhide").addEventListener("click", function() {
ph.show();
});