bootstrap-datetimepicker时间插件及配置参数

　　今天折腾了一下午和一晚上的时间插件，发现bootstrap-datetimepicker、bootstrap-datepicker、bootstrap-timepicker、datetimepicker都不一样，一定要看清引入的是哪个（引入的bootstrap-datetimepicker，但是查配置看了很多datetimepicker），贼浪费时间，真气。

css: bootstrap.min.css 、 bootstrap-datetimepicker.min.css

js: jquery.min.js 、bootstrap.min.js 、 bootstrap-datetimepicker.js 、bootstrap-datetimepicker.zh-CN.js

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

</head>
<body>

<label>日期(年月日)：</label>
<input  type="text" id="date" >

<label>时间（时分）：</label>
<input  type="text" id="time" >

<label>日期+时间（年月日时分）：</label>
<input  type="text" id="date_time" >


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

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

<script type="text/javascript">

    $('#date').datetimepicker({
        format:'yyyy-mm-dd',
        language:'zh-CN',    
        minView: "month",
        autoclose: true
    });
    
    $('#time').datetimepicker({
        format:'hh:ii',
        language:'zh-CN',                
        startView: 1,
        minView: 0,
        autoclose: true,
        
    });
    
    $('#date_time').datetimepicker({
        format:'yyyy-mm-dd hh:ii',
        language:'zh-CN',
        weekStart: 0,
        autoclose: true
    });
</script>

</body>
</html>

效果：

配置参数：

扫描二维码关注公众号，回复： 9091008 查看本文章

属性	默认值	描述	备注
format	mm/dd/yyyy	日期格式	p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。多种组合搭配，满足不同需求。 yyyy-mm-dd yyyy-mm-dd hh:ii yyyy-mm-ddThh:ii yyyy-mm-dd hh:ii:ss yyyy-mm-ddThh:ii:ssZ
weekStart	0	一周从哪一天开始	0（星期日）到6（星期六）
startDate		开始时间	可以选择的最早日期，将禁用所有较早日期。
endDate		结束时间	可以选择的最晚日期，所有较迟的日期都将被禁用。
daysOfWeekDisabled	[]	每周禁用一天。
autoclose	false	当选择一个日期之后是否立即关闭此日期时间选择器。
startView	2	日期时间选择器打开之后首先显示的视图	0 小时 \| 1 天 \| 2 月 \| 3 年 \| 4 十年
minView	0	日期时间选择器所能够提供的最精确的时间选择视图。	0 小时 \| 1 天 \| 2 月 \| 3 年 \| 4 十年
maxView	4	日期时间选择器最高能展示的选择范围视图。	0 小时 \| 1 天 \| 2 月 \| 3 年 \| 4 十年
todayBtn	false	是否显示当前日期（今天）按钮。
todayHighlight	false	是否高亮当前日期。
keyboardNavigation	true	是否启用键盘方向键选择改变日期。
language	en	语言	"zh-cn" 中文 \| "en" 英文
forceParse	true	强制解析。	当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep	5	分钟选择视图，每5分钟一个间隔选择。	只有minView设置支持分钟，才能看到。
pickerReferer	default		没有特殊要求，无序设置。
pickerPosition	bottom-right	时间选择器窗口的位置。	"bottom-left" 左下 \| "bottom-right" 右下 \| "top-left" 左上 \| "top-right" 左下
viewSelect	取 minView 的值	视图选择。	"decade" \| "year" \| "month" \| "day" \| "hour"
showMeridian	false	是否为日视图和小时视图启用子午线视图。
initialDate	new Date()	初始日期。	默认是现在，您可以指定其他日期

配置参考：http://www.h-ui.net/lib/Bootstrap.datetimepicker.js.shtml

bootstrap-datetimepicker时间插件及配置参数

猜你喜欢