Pretty Persian Date Time Picker with jQuery and Bootstrap

Pretty Persian Date Time Picker with jQuery and Bootstrap
File Size: 725 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 from a calendar popup based on Bootstrap 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"
>

4. Full plugin options.

EnglishNumber: false,
Placement: 'bottom',
Trigger: 'click', // trigger event
EnableTimePicker: false,
TargetSelector: '',
GroupId: '',
ToDate: false,
FromDate: false,
DisableBeforeToday: false,
Disabled: false,
Format: '',
IsGregorian: false,
GregorianStartDayIndex: 0,
InLine: false // inline mode

Changelog:

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.