Bootstrap ~ Date control and bootstrap date Control

Bootstrap ~ Date control and bootstrap date Control

Back to directory

A mature framework, date control is indispensable. There are also many date control options available on the Internet, while the main framework uses bootstrap, date control also uses its own,

Control Address: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub Open Source Address: https://github.com/smalot/bootstrap-datetimepicker

Before using datetimepicker, follow these steps:

1 Reference JS script Library

<script src="/Content/bootstraps/js/bootstrap.js"></script><script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script><script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

The bootstrap-datetimepicker.zh-CN.js indicates that the date and time can be displayed in a Chinese language

2. Introduce the CSS class library

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/><link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

3. Define HTML tags

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

4. Compile a datetimepicker event

<Script type = "text/javascript"> $ (". form_datetime "). datetimepicker ({format: "yyyy-mm-dd", autoclose: true, todayBtn: true, todayHighlight: true, showMeridian: true, pickerPosition: "bottom-left", language: 'zh-cn', // Chinese, need to reference zh-CN.js package startView: 2, // monthly view minView: 2 // the most accurate time selection view provided by the date and time selector}); </script>

Note: many friends have asked online how to use only the date or no time, because by default, every time you use datetimepicker to select the day level, very Uncomfortable. Uncle developed in his research and used the minView parameter to solve this problem. It is equivalent to the minimum display accuracy in control,

0 indicates the minute (default), 1 indicates the hour, and 2 indicates the day. If we set the value to 2, the page for selecting the hour will no longer appear!

Back to directory