bootstrap-datetimepicker之初探

最新推荐文章于 2024-08-08 07:19:19 发布

陈_三

最新推荐文章于 2024-08-08 07:19:19 发布

阅读量2.8k

点赞数

分类专栏： bootstrap-datetimepicker

本文链接：https://blog.csdn.net/qinshijangshan/article/details/69525210

版权

本文深入探讨了bootstrap-datetimepicker插件的使用，包括依赖库、语言设置、视图选择、时间步进、日期时间格式、一周起始日、自动关闭、今日按钮、日期范围限制、禁用日期、键盘导航、解析输入值等功能，并提供了多个示例进行说明。此外，文章还提出了进一步研究的方向，如不同设置的比较和更多高级特性。

摘要由CSDN通过智能技术生成

bootstrap-datetimepicker为Bootstrap前端框架的一个日期选择器插件。中文官网首页

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Bootstrap-datetimepicker | 初探</title>
	<meta charset="utf-8"/>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>

<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
			<div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">日期时间选择器：</label>
                <div id="dtp_input1" class="input-group date col-md-4">
                    <input class="form-control" type="text" value="">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<script type="text/javascript" src="../../jquery-1.x.min.js" charset="UTF-8"></script>
<!-- 
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
 -->
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
	//.datetimepicker(options)初始化日期时间选择器;
	$('#dtp_input1').datetimepicker({
		language : 'zh-CN',
		format : 'yyyy-mm-dd hh:ii:ssZ p',
		todayBtn : true,
		autoclose : true
	});
</script>
</body>
</html>

该博文完整示例见：http://download.csdn.net/detail/u013142248/9807052

1.依赖库

须先引入jquery库和bootstrap的css样式库，bootstrap的js不影响该日期时间选择器的正常使用；

注意： .datetimepicker(options)用来初始化日期时间选择器的元素必须定义class="date"，否则样式存在问题，bootstrap.css对样式的边框效果有作用；同时该元素必须定义一个标识用来初始化日期时间选择器（上面的例子标识符为id="dtp_input1"），标识符与class="date"须同级，否则无法弹出日期时间选择器的选择框；它们所在的层级决定了点击哪里弹出日期选择器（本例放在input的外层，点击框内部分出现日期时间选择器；如果需要点击input框弹出日期时间选择器，须同时将初始化日期时间选择器的标识符和class="date"放在input框元素中）。

2.language

日期选择器的语言，默认"en"，可根据需要的语言实行本地化；在jquery之后须引入依赖库。

如引入bootstrap-datetimepicker.zh-CN.js，language:'zh-CN'。

3.视图

日期时间选择器有5种视图

0 or 'hour' for the hour view（小时视图：选某个小时的分钟数，无法选到秒，秒根据加载页面的秒自动给出值）
1 or 'day' for the day view（天视图：选小时）
2 or 'month' for month view (the default)（月视图：选日期；）
3 or 'year' for the 12-month overview（年视图：选月份）
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.（年代视图：选年份）

startView：日期时间选择器打开之后首先显示的视图；日期时间选择器打开之后首先显示的视图（默认值：2，选日期）。