Pretty Persian Date Time Picker with jQuery and Bootstrap 4/3

Pretty Persian Date Time Picker with jQuery and Bootstrap 4/3
File Size: 136 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A pretty date & time jQuery plugin which enables you to select Persian(jalali) date and/or date range from a calendar popup based on Bootstrap 4 or Bootstrap 3 popover component.

Dependencies:

See also:

How to use it:

1. Load jQuery JavaScript library and other required resources in the document.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
  ...
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/jalaali.js"></script>

2. Load the jQuery MD.BootstrapPersianDateTimePicker plugin's JS and CSS files in the document.

<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css">
<script src="jquery.Bootstrap-PersianDateTimePicker.js"></script>

3. Create a normal text input for the date time picker. Plugin's options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="right".

<input id="textbox" type="text" value="۱۳۹۲/۰۱/۰۱"
       data-mddatetimepicker="true"  
       data-placement="right"
>
// or
$('#textbox').MdPersianDateTimePicker({ 
  // options here
});

4. Full plugin options with default values.

// switches between English number or Persian number  
englishNumber: false,

// or top, right, left
placement: 'bottom',

// trigger event
trigger: 'click',

// enables time picker
enableTimePicker: false,

// text selector
targetTextSelector: '',

// date selector
targetDateSelector: '',

// enables date range selection
toDate: false,
fromDate: false,

// group ID
groupId: '',

// disables the date picker
disabled: false,

// text format
// yyyy/MM/dd HH:mm:ss
textFormat: '',

// date formart
// yyyy/MM/dd HH:mm:ss
dateFormat: '',

// is Gregorian
isGregorian: false,

// displays in line
inLine: false,

// selected date
// new Date('2018/9/30')
selectedDate: undefined,

// selected to show
selectedDateToShow: new Date(),

// months to show
monthsToShow: [0, 0],

// year offset
yearOffset: 30,

// holidays
// [new Date(), new Date(2017, 3, 2)]
holiDays: [],

// disabled dates
disabledDates: [],

// disables days before/after today
disableBeforeToday: false,
disableAfterToday: false,

// disables days before/after date
disableBeforeDate: undefined,
disableAfterDate: undefined,

// enables range selecton
rangeSelector: false,
rangeSelectorStartDate: undefined,
rangeSelectorEndDate: undefined

5. API methods.

// gets selected date text
$('#textbox').MdPersianDateTimePicker('getText');

// gets selected date
$('#textbox').MdPersianDateTimePicker('getDate');

// gets date range
$('#textbox').MdPersianDateTimePicker('getDateRange');

// sets a new date
$('#textbox').MdPersianDateTimePicker('setDate', new Date(2018, 12, 24));

// sets a new date range
$('#textbox').MdPersianDateTimePicker('setDateRange', new Date(2018, 11, 30), new Date(2018, 12, 25));

// clears selected date
$('#textbox').MdPersianDateTimePicker('clearDate');

// sets persian date
$('#textbox').MdPersianDateTimePicker('setDatePersian', {year: 1397, month: 1, day: 1, hour: 0, minute: 0, second: 0});

// hides the date time picker
$('#textbox').MdPersianDateTimePicker('hide');

// shows the date time picker
$('#textbox').MdPersianDateTimePicker('show');

// disables the date time picker
$('#textbox').MdPersianDateTimePicker('disable', /isDisable/ true);

// changes type
$('#textbox').MdPersianDateTimePicker('changeType', /isGregorian/ true, /* englishNumber */ true);

// sets new options
$('#textbox').MdPersianDateTimePicker('setOption', 'yearOffset', 5);

Changelog:

2018-12-17

  • Bug fix

2018-11-20

  • Add parser

2018-11-18

  • Update

2018-11-03

  • v3.2.6: some changes; bugfix

2018-10-16

  • v3.2.5: Fix a bug in MonthDropDown

2018-10-10

  • fix a bug in disabledDates

2018-10-02

  • add parser

2018-09-30

  • Added more features.

2018-09-15

  • Fix a bug in set hour

2018-09-12

  • Bugfix

2018-09-11

  • add date range support

2018-09-10

  • Bugfix & Update

2018-06-19

  • Bugfix

2018-03-15

  • Added inline mode

2018-02-19

  • Change version to upload on npm

2018-01-28

  • update.

2017-09-23

  • update.

2017-05-13

  • update.

2017-01-16

  • update.

2016-10-30

  • update.

2016-09-23

  • update.

2016-09-17

  • update.

2016-08-14

  • bugfix

2016-05-21

  • bugfix

2016-01-27

  • Add Disabled to settings

This awesome jQuery plugin is developed by Mds92. For more Advanced Usages, please check the demo page or visit the official website.