Simple Clean Date & Time Picker Plugin For jQuery
| File Size: | 202 KB |
|---|---|
| Views Total: | 12816 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A simple yet highly customizable jQuery plugin for creating nice, clean, Bootstrap style date and time pickers on your web application.
Features:
- 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.
<head> ... <link rel="stylesheet" href="jquery.datetimepicker.css"> </head> <body> ... <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.datetimepicker.js"></script> </body>
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.
$('#demo').datetimepicker({
// options here
});
4. Customize your date & time picker.
$('#demo').datetimepicker({
// 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()
getText('yyyy-MM-dd')
// get current date object
getValue()
Change log:
2017-12-26
- update: fix padding
2016-08-13
- fixed input padding
2015-12-10
- update
This awesome jQuery plugin is developed by FineXs. For more Advanced Usages, please check the demo page or visit the official website.
