Bootstrap must learn date control every day_javascript skills

A mature framework, date control is indispensable, there are many date controls to choose from online, and the main framework uses bootstrap, the date control also needs to use its own currently,

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

Open source address on GitHub: https://github.com/smalot/bootstrap-datetimepicker

Before using datetimepicker, you must first go through the following 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 Chinese language

2 Introducing CSS library

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

３Definition of HTML tags

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

４Write 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',//中文，需要引用zh-CN.js包
 startView: 2,//月视图
 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
 }); 
</script>

Note, many friends have asked on the Internet how to use only date or not time, because by default, every time you use datetimepicker to select, you have to select the daytime level, which is very unpleasant, uncle. Developed during research, this problem was solved by using the minView parameter, which is equivalent to the minimum display accuracy in control,

0 represents minutes (default), 1 represents hours, and 2 represents days. If we set the value to 2, the page for selecting hours will no longer appear!

Friends who want to know more about Bootstrap can click "bootstrap Learning Tutorial" for in-depth study.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.