Mds92 / Md.bootstrappersiandatetimepicker
Persian Date Time Picker with jQuery & Bootstrap
Stars: ✭ 251
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Md.bootstrappersiandatetimepicker
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+1255.38%)
Mutual labels: datetimepicker, jquery
Datetimepicker
Responsive jQuery DateTime Picker plugin for Web & Mobile
Stars: ✭ 356 (+41.83%)
Mutual labels: datetimepicker, jquery
Anypicker
jQuery Picker Library for Android, iOS & Windows Phone. eg Date Picker, Time Picker, DateTime Picker, Custom Select etc
Stars: ✭ 114 (-54.58%)
Mutual labels: datetimepicker, jquery
Magnify
A lightweight jQuery magnifying glass zoom plugin.
Stars: ✭ 218 (-13.15%)
Mutual labels: jquery
Warehouse Inventory System
Open source inventory management system with php and mysql
Stars: ✭ 235 (-6.37%)
Mutual labels: jquery
Modaal
An accessible dialog window library for all humans.
Stars: ✭ 2,702 (+976.49%)
Mutual labels: jquery
Jqwidgets
Angular, Vue, React, Web Components, Blazor, Javascript, jQuery and ASP .NET Framework,
Stars: ✭ 227 (-9.56%)
Mutual labels: jquery
Jquery Auto Geocoder
jQuery plug-in to automatically geocode and display a location entered.
Stars: ✭ 227 (-9.56%)
Mutual labels: jquery
Jquery Multiselect
Turn a multiselect list into a nice and easy to use list with checkboxes.
Stars: ✭ 221 (-11.95%)
Mutual labels: jquery
Ziptastic Jquery Plugin
This is a jQuery plugin that shows how Ziptastic could be used.
Stars: ✭ 244 (-2.79%)
Mutual labels: jquery
Ajax Live Search
AJAX Live Search is a PHP search form that similar to Google Autocomplete feature displays the result as you type.
Stars: ✭ 238 (-5.18%)
Mutual labels: jquery
Tablesorter
Github fork of Christian Bach's tablesorter plugin + awesomeness ~
Stars: ✭ 2,532 (+908.76%)
Mutual labels: jquery
Liteaccordion
A lightweight horizontal accordion plugin for jQuery.
Stars: ✭ 234 (-6.77%)
Mutual labels: jquery
MD.BootstrapPersianDateTimePicker
Bootstrap 4+ Persian And Gregorian Date Time Picker jQuery 3+ Plugin
MD.BootstrapPersianDateTimePicker uses Bootstrap Popovers, and Bootstrap Modal. so it has flexibility of bootstrap's popover.
NOTE:
If you want Bootstrap 3 version see https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs3
Installing:
First you have to install Bootstrap 4+ and jQuery 3+ and link them to your html file.
Then you can install latest version of the plugin via npm:
npm install [email protected]
Now add these files to you html:
<link href="/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet"/>
<script src="/dist/jquery.md.bootstrap.datetimepicker.js"></script>
I suggest to add scripts at the end of body tag and after jQuery library.
How to use:
$('#id').MdPersianDateTimePicker({
targetTextSelector: '#inputTextDate1',
targetDateSelector: '#inputHiddenDate1',
});
Options:
Default values are into [ ]
| Name | Values | Description | Sample |
|---|---|---|---|
| englishNumber | [false], true | Switch between English number or Persian number | |
| placement | top, right, [bottom], left | Position of date time picker | |
| trigger | [click], mousedown, focus, ... | Event to show date time picker | |
| enableTimePicker | [false], true | Time picker visibility | |
| targetTextSelector | String | CSS selector to show selected date as format property into it |
'#TextBoxId' |
| targetDateSelector | String | CSS selector to save selected date into it | '#InputHiddenId' |
| toDate | [false], true | When you want to set date picker as toDate to enable date range selecting |
|
| fromDate | [false], true | When you want to set date picker as fromDate to enable date range selecting |
|
| groupId | String | When you want to use toDate, fromDate you have to enter a group id to specify date time pickers |
'dateRangeSelector1' |
| disabled | [false], true | Disable date time picker | |
| textFormat | String | format of selected date to show into targetTextSelector
|
'yyyy/MM/dd HH:mm:ss' |
| dateFormat | String | format of selected date to save into targetDateSelector
|
'yyyy/MM/dd HH:mm:ss' |
| isGregorian | [false], true | Is calendar Gregorian | |
| inLine | [false], true | Is date time picker in line | |
| modalMode | [false], true | Open in modal mode, suitable for smart phones | |
| selectedDate | [undefined], Date | Selected date as JavaScript Date object | new Date('2018/9/30') |
| selectedDateToShow | [new Date()], Date | Selected date to start calendar from it as JavaScript Date object | new Date('2018/9/30') |
| selectedRangeDate | Array: Date[] | Selected range date as JavaScript Date object | [new Date('2020/8/5'), new Date('2020/8/15')] |
| monthsToShow | Numeric array with 2 items, [0 ,0] | To show, number of month before and after selected date in date time picker, first item is for before month, second item is for after month | [1, 1] |
| yearOffset | Number | Number of years to select in year selector | 30 |
| holiDays | Array: Date[] | Array of holidays to show in date time picker as holiday | [new Date(), new Date(2017, 3, 2)] |
| disabledDates | Array: Date[] | Array of disabled dates to prevent user to select them | [new Date(2017, 1, 1), new Date(2017, 1, 2)] |
| specialDates | Array: Date[] | Array of dates to mark some dates as special | [new Date(2017, 2, 1), new Date(2017, 3, 2)] |
| disabledDays | Array: number[] | Array of disabled days to prevent user to select them | Disable all "Thursday", "Friday" in persian [ 5, 6 ] |
| disableBeforeToday | [false], true | Disable days before today | |
| disableAfterToday | [false], true | Disable days after today | |
| disableBeforeDate | Date | Disable days before this Date | new Date(2018, 11, 12) |
| disableAfterDate | Date | Disable days after this Date | new Date(2018, 12, 11) |
| rangeSelector | [false], true | Enables rangeSelector feature on date time picker | |
| calendarViewOnChange(date) | function | Event fires on view change |
String format:
| Format | English Description | Persian Description |
|---|---|---|
| yyyy | Year, 4 digits | سال چهار رقمی |
| yy | Year, 2 digits | سال دو رقمی |
| MMMM | Month name | نام ماه |
| MM | Month, 2 digits | عدد دو رقمی ماه |
| M | Month, 1 digit | عدد تک رقمی ماه |
| dddd | Week day name | نام روز هفته |
| dd | Month's day, 2 digits | عدد دو رقمی روز |
| d | Month's day, 1 digit | عدد تک رقمی روز |
| HH | Hour, 2 digits - 0 - 24 | عدد دو رقمی ساعت با فرمت 0 تا 24 |
| H | Hour, 1 digit - 0 - 24 | عدد تک رقمی ساعت با فرمت 0 تا 24 |
| hh | Hour, 2 digits - 0 - 12 | عدد دو رقمی ساعت با فرمت 0 تا 12 |
| h | Hour, 1 digit - 0 - 12 | عدد تک رقمی ساعت با فرمت 0 تا 12 |
| mm | Minute, 2 digits | عدد دو رقمی دقیقه |
| m | Minute, 1 digit | عدد تک رقمی دقیقه |
| ss | Second, 2 digits | ثانیه دو رقمی |
| s | Second, 1 digit | ثانیه تک رقمی |
| tt | AM / PM | ب.ظ یا ق.ظ |
| t | A / P | حرف اول از ب.ظ یا ق.ظ |
Functions:
| Name | Return | Description | Sample |
|---|---|---|---|
| getText | string | Get selected date text | $('#id').MdPersianDateTimePicker('getText'); |
| getDate | Date | Get selected date | $('#id').MdPersianDateTimePicker('getDate'); |
| getDateRange | [fromDate, toDate]: Date[] | Get selected date range | $('#id').MdPersianDateTimePicker('getDateRange'); |
| setDate | void | Set selected datetime with Date object argument | $('#id').MdPersianDateTimePicker('setDate', new Date(2018, 11, 12)); |
| setDateRange | void | Set selected datetime range with Date object argument | $('#id').MdPersianDateTimePicker('setDateRange', new Date(2018, 11, 01), new Date(2018, 11, 12)); |
| clearDate | void | clear selected date | $('#id').MdPersianDateTimePicker('clearDate'); |
| setDatePersian | void | Set selected datetime with persian json argument | $('#id').MdPersianDateTimePicker('setDatePersian', {year: 1397, month: 1, day: 1, hour: 0, minute: 0, second: 0}); |
| hide | void | Hide date time picker | $('#id').MdPersianDateTimePicker('hide'); |
| show | void | Show date time picker | $('#id').MdPersianDateTimePicker('show'); |
| disable | void | Disable or enable date time picker | $('#id').MdPersianDateTimePicker('disable', /isDisable/ true); |
| destroy | void | Dispose date time picker | $('#id').MdPersianDateTimePicker('destroy'); |
| changeType | void | Switch between Persian or Gregorian calendar | $('#id').MdPersianDateTimePicker('changeType', /isGregorian/ true, /* englishNumber */ true); |
| setOption | void | Set an option | $('#id').MdPersianDateTimePicker('setOption', 'yearOffset', 5); |
Events:
MD.BootstrapPersianDateTimePicker uses Bootstrap's popover, and Bootstrap's modals. so you can use popover or modal events.
https://getbootstrap.com/docs/4.5/components/popovers/#events https://getbootstrap.com/docs/4.5/components/modal/#events
$('#date1').on('hidden.bs.popover', function () {
// do something…
})
Backend:
If you are using .net in your backend I suggest you https://github.com/Mds92/MD.PersianDateTime to handle PersianDateTime as easy as DateTime.
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].