Customizable Date/Month/Year Picker Plugin - jQuery PDatePicker

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.