bootstrap中的日期插件datetimepicker,怎么设置让它只到年月日
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap中的日期插件datetimepicker,怎么设置让它只到年月日相关的知识,希望对你有一定的参考价值。
参考技术A 1.引入<link href="Public/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="sh::PUBjs/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="sh::PUBcss/bootstrap-datetimepicker.min.css">
<script src="sh::PUBjs/bootstrap-datetimepicker.min.js" type="text/javascript" /></script>
<script src="sh::PUBjs/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" /></script>
2.配置
// 日历
$('.form_datetime').datetimepicker(
minView: "month", //选择日期后,不会再跳转去选择时分秒
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: 1,
);
3.html
<div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">*时间:</label>
</div>
<div class="right col-xs-6 text-left">
<div class="input-group">
<input type="text" class="form-control form_datetime" id="addtime" name="addtime" value="sh:$info.addtime|default=$time|date='Y-m-d',###" placeholder="">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
</div>
</div>
</div>
日期时间JS插件
首先要引入基本文件:bootstrap的基本js和css文件,因为用到了jquery所以要引入jquery文件
1 <script src="jquery-1.11.2.min.js"></script> 2 <script src="bootstrap.min.js"></script> 3 <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
1.引入日期时间的js文件(此插件是基于bootstrap时间插件daterangepicker的汉化版)
1 <!--时间日期js组件--> 2 <script type="text/javascript" src="moment.js"></script> 3 <script type="text/javascript" src="daterangepicker.js"></script>
2.引入日期时间的css文件
1 <!--时间日期css组件--> 2 <link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"rel="stylesheet">//这个文件用来下载日历图标 3 <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />
3.html代码
1 <div class="col-xs-12"><!--日期查询组件--> 2 <label class="col-sm-1 control-label tj">发布时间:</label> 3 <div class="col-xs-4 tj"> 4 <form class="form-horizontal"> 5 <fieldset> 6 <div class="control-group"> 7 <div class="controls"> 8 <div class="input-prepend input-group"> 9 <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span> 10 <input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="请选择查询日期" /> 11 </div> 12 </div> 13 </div> 14 </fieldset> 15 </form> 16 </div> 17 </div>
4.js代码
1 //日期查询js组件 2 $(document).ready(function(e) { 3 $(‘#reservation‘).daterangepicker(null, function(start, end, label) { 4 console.log(start.toISOString(), end.toISOString(), label); 5 }); 6 }); 7 8 9 var rqstart = ""; 10 var rqend = ""; 11 //日期时间方法 12 $(document).ready(function(e) { 13 $(‘input[name="reservation"]‘).daterangepicker( 14 { 15 /*format: ‘YYYY-MM-DD‘, 16 startDate: ‘2013-01-01‘, 17 endDate: ‘2013-12-31‘*/ 18 }, 19 function(start, end, label) { 20 //alert(‘A date range was chosen: ‘ + start.format(‘YYYY-MM-DD‘) + ‘ to ‘ + end.format(‘YYYY-MM-DD‘)); 21 start = start.format(‘YYYY-MM-DD‘);//.format()把任意数据转换成字符串 22 end = end.format(‘YYYY-MM-DD‘); 23 rqstart = start;//获取到开始日期 24 rqend = end;//获取到结束日期 25 26 } 27 ); 28 });
5.此插件只能改变日期后点击确定按钮后,才可以获取到开始日期和结束日期
因为博主创建的百度云链接点开后一直显示页面不存在,所以本文章所用js和css文件如有需要可以私信
以上是关于bootstrap中的日期插件datetimepicker,怎么设置让它只到年月日的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap中的日期插件datetimepicker,怎么设置让它只到年月日
Bootstrap-weekpicker 插件在表单中发布日期格式