bootstrap-datetimepicker 时间控件的简单实用

1.引包

<link rel="stylesheet" href="../lib/css/conmon.css">

<link rel="stylesheet" href="../lib/css/bootstrap.min.css">

<link rel="stylesheet" href="../lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">

 

<script src="../lib/js/jquery-2.1.4.min.js"></script>

<script src="../lib/js/bootstrap.min.js"></script>

<script src="../lib/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

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

 

2 页面结构

<input type="text" value="" id="datetimepicker">  年月日

<input type="text" value="" id="datetimepicker1">年月

<input type="text" value="" id="datetimepicker2">年

 

3.调用方法

$('#datetimepicker').datetimepicker({

format:'yyyy-mm-dd',

autoclose:true,//自动关闭

minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

 

});

 

$('#datetimepicker1').datetimepicker({

format:'yyyy-mm',

autoclose:true,//自动关闭

minView:3,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

startView:3,

language:'zh-CN'

 

 

});

 

$('#datetimepicker2').datetimepicker({

format:'yyyy',

autoclose:true,//自动关闭

minView:4,//最精准的时间选择为日期0-分 1-时 2-日 3-月

weekStart:0,

startView:4

 

});

 

简单实用, http://www.cnblogs.com/benyu-aimao/p/4095583.html  

 

 

 

 

使用前切记初始化

$('#datetimepicker1').datetimepicker('remove');