Customizable Date/Month/Year Picker Plugin - jQuery PDatePicker
File Size: | 6.51 KB |
---|---|
Views Total: | 1311 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PDatePicker is a lightweight yet customizable date picker plugin that lets visitors easily select dates, months, and years in a calendar popup.
Features:
- Allows to set date ranges.
- Dark Mode included.
- Today button.
- Allows to set the selected date on init.
- And much more.
How to use it:
1. Include the jQuery PDatePicker's files on the page.
<link rel="stylesheet" href="./css/date-picker.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="./js/date-picker.js"></script>
2. Attach the date picker to the date input you specify. Done.
<input type="date" name="" id="datePicker" />
let datePicker; $(() => { datePicker = $("#datePicker").pDatePicker({ // options here }); });
3. Change the calendar type: "date"(default), "month", "year".
$("#datePicker").pDatePicker({ type: "year" });
4. Set the date range.
$("#datePicker").pDatePicker({ range: { startDate: new Date(2000, 0, 1), // Jan 1, 2000 endDate: new Date(2024,11,31), // Dec 31, 2024 }, });
5. Specify which month to show on init.
$("#datePicker").pDatePicker({ showDate: new Date(2023, 1), // Feb 2023 });
6. Set the selected date on init.
$("#datePicker").pDatePicker({ selected: new Date(2023, 1, 20), // Feb 20, 2023 });
7. Determine whether to show a Today button in the calendar. Default: true.
$("#datePicker").pDatePicker({ showTodayButton: false, });
8. Enable the dark mode and apply your own CSS class(es) to the date picker.
$("#datePicker").pDatePicker({ themeClass: "dark", });
9. Specify the the First Day of the Week. Default: false (Sunday).
$("#datePicker").pDatePicker({ mondayFirst: true, });
10. Localize the date picker.
const dayText = { en: "Su,Mo,Tu,We,Th,Fr,Sa".split(","), id: "Mi,Se,Sl,Ra,Ka,Ju,Sa".split(","), }; const monthText = { en: "January,February,March,April,May,June,July,Augustus,September,October,November,December".split( "," ), id: "Januari,Februari,Maret,April,Mei,Juni,Juli,Agustus,September,Oktober,November,Desember".split( "," ), }; const todayText = { en: "Today", id: "Hari ini", };
$("#datePicker").pDatePicker({ lang: "id" });
11. Append additional CSS classes to the date input.
$("#datePicker").pDatePicker({ inputClass: "", });
Changelog:
2023-10-10
- Add parameter inputClass
2023-05-04
- JS update
This awesome jQuery plugin is developed by poetrasapoetra. For more Advanced Usages, please check the demo page or visit the official website.