Simple Clean Date & Time Picker Plugin For jQuery

File Size: 202 KB
Views Total: 12639
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.