Simple Clean Date & Time Picker Plugin For jQuery

Simple Clean Date & Time Picker Plugin For jQuery

A simple yet highly customizable jQuery plugin for creating nice, clean, Bootstrap style date and time pickers on your web application.


  • Custom view modes.
  • Custom start / end date.
  • Easy to stylize.
  • Useful callback events and APIs.

Basic usage:

1. Include the required style sheet in the head section and the script jquery.datetimepicker.js at the bottom of the document. Make sure you first have jQuery library installed.

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

2. Create an empty element and the plugin will render a calendar UI inside it for the date & time picker.

<span id="demo"></span>

3. Initialize the plugin to create a basic date & time picker.

  // options here

4. Customize your date & time picker.

  // basic CSS class
  baseCls: "perfect-datetimepicker",
  // 'YM'|'YMD'|'YMDHMS'|'HMS'
  viewMode: $.fn.datetimepicker.CONSTS.VIEWMODE.YMD,
  // end date
  endDate: null,
  // star date
  startDate: null, 
  // en or zh
  language: 'zh',
  // initial date
  date: null,
  // callback events
  onDateUpdate: null,
  onClear: null,
  onOk: null,
  onClose: null,
  onToday: null

5. API.

// get current date & time
// getText()
// get current date object

Change log:


  • update: fix padding


  • fixed input padding


  • update

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

  • Publication date: 26.12.2017
  • Source