Pwt.datepicker
Javascript jalaali calendar capable datepicker widget
Install / Use
/learn @babakhani/Pwt.datepickerREADME
Persian Date Picker
Important Notice: Project Deprecation
I will no longer be maintaining or supporting this package. While the code remains accessible, please be advised that you use it at your own risk.
This package is deprecated primarily due to the deprecation of jQuery. jQuery is no longer a viable technology for modern web development, and it is not wise to continue adding features to projects that rely on it.
Leap Year Issues
If you encounter problems related to leap year handling, please review the dedicated discussion in GitHub Issue #421.
The leap year issue was resolved at the beginning of the project. For more details on the research and solution, refer to the documentation here: Leap Year Research.
Additionally, the main configuration for leap year handling in the Persian Date library can be found in the documentation: Leap Year Mode Configuration.
This Date picker work with Iranian calendar.
Jalali calendar datepicker, which depends on persianDate
More info at Wikipedia
Note: from v1.0.0 persianDatepicker support gregorian calendar
<a class="github-button" href="https://github.com/babakhani/pwt.datepicker" data-icon="octicon-star" data-style="mega" data-count-href="/babakhani/pwt.datepicker/stargazers" data-count-api="/repos/babakhani/pwt.datepicker#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star babakhani/pwt.datepicker on GitHub">Star</a> <a class="github-button" href="https://github.com/babakhani/pwt.datepicker/issues" data-icon="octicon-issue-opened" data-style="mega" data-count-api="/repos/babakhani/pwt.datepicker#open_issues_count" data-count-aria-label="# issues on GitHub" aria-label="Issue babakhani/pwt.datepicker on GitHub">Issue</a> <a class="github-button" href="https://github.com/babakhani/pwt.datepicker/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/babakhani/pwt.datepicker/network" data-count-api="/repos/babakhani/pwt.datepicker#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork babakhani/pwt.datepicker on GitHub">Fork</a>
Table of content:
CDN
- persian-date.js uncompressed | minified
- persian-datepicker.js uncompressed | minified
- persian-datepicker.css uncompressed | minified
Dependency
persian-datepicker 1.x.x need persian-date 1.x.x
Install
npm install persian-datepicker
bower install persian-datepicker
Usage
<head>
<link rel="stylesheet" href="css/persian.datepicker.css"/>
<script src="js/jquery.js"></script>
<script src="js/persian.date.js"></script>
<script src="js/persian.datepicker.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").pDatepicker();
});
</script>
<input type="text" class="example1" />
Options table
| name | type | default | description | | ------------- |:-------------: | :----------------------------------------------:| :----------: | | calendarType | string | 'persian' | Set default calendar mode of datepicker, available options: 'persian', 'gregorian' | | calendar | object | | Calendar type and localization configuration | | calendar.persian | object | | Persian calendar configuration | | calendar.persian.locale | string | 'fa' | Set locale of Persian calendar available options: 'fa', 'en' | | calendar.persian.showHint | boolean | false | If set true, small date hint of this calendar will be shown on another calendar | | calendar.persian.leapYearMode | string | algorithmic | Persian calendar leap year calculation mode, available options: 'algorithmic', 'astronomical' | | calendar.gregorian | object | | Gregorian calendar configuration | | calendar.gregorian.locale | string | 'en' | set locale of Gregorian calendar available options: 'fa', 'en' | | calendar.gregorian.showHint | boolean | false | If set true, small date hint of this calendar will be shown on another calendar | | responsive | boolean | true | If set true make enable responsive view on mobile devices | | initialValue | boolean | true | If set true datepicker init with input value date, use data-date property when you want set inline datepicker initial value | | initialValueType | string | 'gregorian' | Initial value calendar type, accept: 'persian', 'gregorian' | | inline | boolean | false | If set true datepicker render inline | | persianDigit (DEPRECATED from 1.0.0) | boolean | true | If set true all digit shows as persian digit | | viewMode | string | 'day' | Accept 'day', 'month', 'year' | | format | string | 'LLLL' | The date format, combination of d, dd, m, mm, yy, yyy. format document | | formatter | function | function(unixDate){return unixDate} | Main Input value formatter function | | altField | string | null | An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field. acceptable value: : '#elementId','.element-class' | | altFormat | string | 'unix' | The date format, combination of d, dd, m, mm, yy, yyy. format document | | altFieldFormatter | function | function(unixDate){return unixDate} | Format value of alt field input input | | minDate | Unix Offset | null | Set min date on datepicker, prevent user select date before given unix time | | maxDate | Unix Offset | null | Set max date on datepicker, prevent user select date after given unix time | | navigator | object | | Navigator config object | | navigator.enabled | boolean | true | Make navigator enable or disable | | navigator.scroll | object | | Navigate by scroll configuration | | navigator.scroll.enabled | boolean | true | If you want prevent to navigate with mouse-wheel event make this option false | | navigator.text | object | | Navigator text config object | | navigator.text.btnNextText | string | '<' | Text of next button| | navigator.text.btnPrevText | string | '>' | Text of previews button | | navigator.onNext | event | function (navigator) {} | Called when navigator goes to next state | | navig
Related Skills
node-connect
338.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
338.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.4kCommit, push, and open a PR
