• Bootstrap的datetimepicker插件使用


    在设计前端页面的时候,经常涉及到日期的选择,那么在页面显示一个日历对用户体验来说是比较好。bootstrap中有datetimepicker插件专门实现日历。
    在使用datetimepicker之前有几个必备的文件要先引入下面几个文件
    (1) datetimepicker的css文件和js文件
    (2)jQuery文件
    (3)Bootstrap的css文件和js文件
    (4)moment文件
    引入的文件如下所示

    <link href="/pages/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
    	<link  href="/pages/css/bootstrap.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    	<script src="/pages/js/jquery-1.11.3.min.js"></script>
    	<script src="/pages/js/bootstrap.min.js"></script>
    	<script src="/pages/js/moment.min.js"></script>
    

    前段部分代码如下所示

    <div class="col-md-2">
    				<div class="form-group">
    					<label>StartTime</label>
    					<div class="input-group date">
    						<input type='text' class="form-control" id="datetimepicker1" name="StartTime" value="${param.StartTime}"/>
    						<span class="input-group-addon">
    							<span class="glyphicon glyphicon-calendar"></span>
    						</span>
    					</div>
    				</div>
    				</div>
    				<div class="col-md-2">
    					<div class="from-group">
    						<label>EndTime</label>
    						<div class="input-group date" >
    							<input type="text" class="form-control" id="datetimepicker2" name="EndTime" value="${param.EndTime}"/>
    							<span class="input-group-addon">
    								<span class="glyphicon glyphicon-calendar"></span>
    							</span>
    						</div>
    					</div>
    

    js代码:

     $(function () {
             $('#datetimepicker1').datetimepicker({
                minView: "month", //选择日期后,不会再跳转去选择时分秒
                format: "yyyy-mm-dd", //选择日期后,文本框显示的日期格式
                language: 'zh-CN', //汉化
                showMeridian : true,//是否加上网格
                autoclose:true, //选择日期后自动关闭
                weekStart: 1,
                todayBtn: 1,
    
            });
             $('#datetimepicker2').datetimepicker({
                minView: "month", //选择日期后,不会再跳转去选择时分秒
                format: "yyyy-mm-dd", //选择日期后,文本框显示的日期格式
                language: 'zh-CN', //汉化
                showMeridian : true,//是否加上网格
                autoclose:true, //选择日期后自动关闭
                weekStart: 1,
                todayBtn:  1,
            });
    

    结果显示图入下:

    最后如果日历显示不出来。那么在浏览器的控制台看看哪里报错,js是只要有一个地方有error,接下来的代码都不会被执行。

  • 相关阅读:
    转移到新的个人独立博客。
    hdu5618 (三维偏序,cdq分治)
    平衡树维护动态凸包
    poj1986 LCA
    hdu2586 LCA
    LCA最近公共祖先 ST+RMQ在线算法
    hdu 3401 单调队列优化DP
    【转】单调队列优化DP
    CodeForces 548D 单调栈
    hdu3530 单调队列
  • 原文地址:https://www.cnblogs.com/NaCl/p/9637896.html
Copyright © 2020-2023  润新知