bootstrap-datetimepicker的基本用法

最新推荐文章于 2024-03-25 09:47:55 发布

谢泽豪

最新推荐文章于 2024-03-25 09:47:55 发布

阅读量475

点赞数

分类专栏： web前端的笔记

本文链接：https://blog.csdn.net/qq_19306197/article/details/52440103

版权

web前端的笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

项目中需要有一些日期选择框控件来选择日期，于是我在网上找了一些日期选择框控件例子，觉得bootstrap-datetimepicke这个框架不错。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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">
	<div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy/mm/dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
		    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
         </div>
    </form>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script type="text/javascript">
    
	$('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	minView: 2,
	forceParse: 0,
	pickerPosition:'bottom-left'
    });
	
</script>

</body>
</html>

在Bootstrap框架基础上，这里还需要导入三个文件

bootstrap-datetimepicker.min.css//需要在<head>标签

//在<body>中导入
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

使用bootstrap-datetimepicke时，遇到了几个问题：

（一）星期设置，在bootstrap-datetimepicker.fr.j文件中可自由设置星期的文本。

;(function($){
	$.fn.datetimepicker.dates['fr'] = {
		days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thurday", "Friday", "Saturday", "Sunday"],
		daysShort: ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat", "Sun"],
		daysMin: ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat", "Sun"],
		months: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
		monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		today: "Today",
		suffix: [],
		meridiem: ["am", "pm"],
		weekStart: 1,
		format: "dd/mm/yyyy hh:ii"
	};
}(jQuery));

（二）日期选择框位置设置，有个pickerPosition参数可指定弹出框的位置，有四个选项：bottom-left（左下），bottom-right（右下），top-left（左上），top-right（右上）

<script type="text/javascript">
    
	$('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	minView: 2,
	forceParse: 0,
	pickerPosition:'bottom-left'
    });
	
</script>

也可以在源文件-bootstrap-datetimepicker.js中修改，代码在577~588行，

      top = top;//设置弹出框的显示位置（顶部）
      left = left - containerOffset.left;//设置弹出框的显示位置（左边）

谢泽豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录