Pretty Bootstrap-style Datetime Picker Plugin - Perfect-DateTimePicker

A simple, pretty nice, Bootstrap-style, jQuery based datetime picker plugin with support for custom date/time format, year/month/time view, date range selection and much more.

View more:

• 50 Best Date And Time Picker jQuery Plugins 

Basic usage:

1. Add references to jQuery library and the Perfect-DateTimePicker plugin's file:

<link rel="stylesheet" href="jquery.datetimepicker.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>

2. Create a container element to place the inline calendar from which you can select a date.

<div id="demo"></div>

3. Call the function to create a basic datetime picker inside the container.

$('#demo').datetimepicker();

4. All default customization options.

$('#demo').datetimepicker({
  baseCls: "perfect-datetimepicker", 
  viewMode: $.fn.datetimepicker.CONSTS.VIEWMODE.YMD, // see below
  firstDayOfWeek: 0, // 0 = sunday
  date: null, //initial date
  endDate: null, //end date
  startDate: null, //start date
  language: 'en', //I18N
  //date update event
  onDateChange: null,
  //clear button click event
  onClear: null,
  //ok button click event
  onOk: null,
  //close button click event
  onClose: null,
  //today button click event
  onToday: null
});

5. Constants available.

I18N: {
  zh: {
      SDN: ["日", "一", "二", "三", "四", "五", "六"],
      MN: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      DN: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      CALENDAR: "日历",
      CLEAR: "清空",
      TODAY: "今天",
      OK: "确定",
      CURRENT: "当前",
      TIME: "时间"
  },
  en: {
      SDN: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      MN: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      DN: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      CALENDAR: "Calendar",
      CLEAR: "Clear",
      TODAY: "Today",
      OK: "OK",
      CURRENT: "Now",
      TIME: "Time"
  },
  de: {
      SDN: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
      MN: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
      DN: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
      CALENDAR: "Kalender",
      CLEAR: "Löschen",
      TODAY: "Heute",
      OK: "OK",
      CURRENT: "Jetzt",
      TIME: "Zeit"
  },
  nl: {
      SDN: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
      MN: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
      DN: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
      CALENDAR: "Kalender",
      CLEAR: "Legen",
      TODAY: "Vandaag",
      OK: "OK",
      CURRENT: "Nu",
      TIME: "Tijd"
  }
},

VIEWMODE: {
  YM: 'YM',  // yyyyMM
  YMD: 'YMD', // yyyyMMdd
  HMS: 'HMS', // HHmmss
  HM: 'HM', // HHmm
  YMDHMS: 'YMDHMS', // yyyyMMddHHmmss
  YMDHM: 'YMDHM' // yyyyMMddHHmm
},

MINYEAR: 1900,
MAXYEAR: 2999,

NAV: {
  'prevm': 2, //previous month
  'nextm': 3, //next month
  'title': 4, //title
  'clear': 5, //clear
  'today': 6, //today
  'dok': 7,   //ok in day pane
  'prevy': 8, //previous ten years
  'nexty': 9, //next ten years
  'cancel': 10, //cancel
  'mok': 11,   //ok in month pane
  'plus': 12, //plus
  'minus': 13, //minus
  'current': 15, //current
  'day': 100, //day
  'month': 200, //month
  'year': 300 //year
}

Changelog:

2019-05-12

• Uncaught TypeError: picker.getText is not a function

2018-12-31

• fix: revert implement of picker-panel

2018-10-08

• update: remove onDisplayUpdate event & onDateUpdate -> onDateChange
• update: date format

2017-07-20

• allows to click on other month's days

2017-06-30

• fix: onToday

---

This awesome jQuery plugin is developed by jiandaoyun. For more Advanced Usages, please check the demo page or visit the official website.