您的位置：首页 > Web前端 > BootStrap

bootstrap-datetimepicker的基本用法

2016-09-05 14:42 288 查看

项目中需要有一些日期选择框控件来选择日期，于是我在网上找了一些日期选择框控件例子，觉得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,
9c27

todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
pickerPosition:'bottom-left'
});

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航