使用bootstrap框架日期组件

最新推荐文章于 2024-06-02 09:47:02 发布

筱光

最新推荐文章于 2024-06-02 09:47:02 发布

阅读量1k

点赞数 1

分类专栏： Web 文章标签： bootstrap 日期组件

本文链接：https://blog.csdn.net/womeng2009/article/details/53401774

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、首先，bootstrap是支持日期组件的。在网上找了很多方法尝试，失败了很多次。最终一个问题一个问题的解决，总结如下。

1. 注意bootstrap.datetimepicker.js等文件的版本，版本不同，使用方式也不同。

2. Firefox浏览器对js的支持不同，需要修改bootstrap-datetimepicker.js文件中的

this.defaultTimeZone = (new Date).toString().split('(')[1].slice(0, -1);

改为：

this.defaultTimeZone='GMT '+(new Date()).getTimezoneOffset()/60;

否则在火狐中运行，按F12开发者模式调试窗口可以看到JS的报错。

这里给出网上给出的案例代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title></title>
    <link href="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">DateTime Picking</label>
	                <div class="input-group date form_datetime col-md-5" data-date="2016-11-29T09:00:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
	                    <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-th"></span></span>
	                </div>
					<input type="hidden" id="dtp_input1" value="" /><br/>
	            </div>
				<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="dd MM yyyy" 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>
					<input type="hidden" id="dtp_input2" value="" /><br/>
	            </div>
				<div class="form-group">
	                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
	                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
	                    <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-time"></span></span>
	                </div>
					<input type="hidden" id="dtp_input3" value="" /><br/>
	            </div>
	        </fieldset>
	    </form>
	</div>

	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
 	<script type="text/javascript"> 
 	    $('.form_datetime').datetimepicker({
 	        //language:  'fr',
 	        weekStart: 1,
 	        todayBtn:  1,
 			autoclose: 1,
 			todayHighlight: 1,
			startView: 2,
 			forceParse: 0,
 	        showMeridian: 1
 	    });
 		$('.form_date').datetimepicker({
 	        //language:  'fr',
 	        weekStart: 1,
 	        todayBtn:  1,
 			autoclose: 1,
 			todayHighlight: 1,
			startView: 2,
 			minView: 2,
 			forceParse: 0
 	    });
 		$('.form_time').datetimepicker({
 	        language:  'fr',
 	        weekStart: 1,
 	        todayBtn:  1,
 			autoclose: 1,
 			todayHighlight: 1,
startView: 1,
 			minView: 0,
 			maxView: 1,
 			forceParse: 0
 	    });
 	</script>
		
</body>
</html>

二、日期默认是英文的，想要使用中文版的有两种办法。

1、修改bootstrap-datetimepicker.js文件中的下面程序片段：

var dates = $.fn.datetimepicker.dates = {
    en: {
      days:        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
      daysShort:   ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      daysMin:     ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
      months:      ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      meridiem:    ['am', 'pm'],
      suffix:      ['st', 'nd', 'rd', 'th'],
      today:       'Today',
      clear:       'Clear'
    }
  };
//修改为：


$.fn.datetimepicker.dates['zh'] = {
				days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
				daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
				daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
				months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
				monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
				meridiem:    ["上午", "下午"],
				//suffix:      ["st", "nd", "rd", "th"],
				today:       "今天"
		};

然后在JS中指定语言为zh就可以使用中文。如下所示：

$(function(){
		$('.datepicker').datetimepicker({
		    language:  'zh',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
		    showMeridian: 1
		}).on('changeDate', function (ev) {
		    $(this).datetimepicker('hide');
		});
	});

2．引用bootstrap-datetimepicker.zh-CN.js文件

JS中设为：

language: 'zh-CN',

即可

筱光

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap框架日期组件

一、首先，bootstrap是支持日期组件的。在网上找了很多方法尝试，失败了很多次。最终一个问题一个问题的解决，总结如下。1. 注意bootstrap.datetimepicker.js等文件的版本，版本不同，使用方式也不同。2. Firefox浏览器对js的支持不同，需要修改bootstrap-datetimepicker.js文件中的this.defaultTi
复制链接

扫一扫

专栏目录