大侠不会飞

全(da)栈(za)工程师的自我修行

前端-bootstrap-datatimdepicker案例

官方文档:http://www.bootcss.com/p/bootstrap-datetimepicker/

.datetimepicker() 放在jsp页面的 后面,以确保在其他js代码后面加载

代码:

<td class="row">
   <div class="col-xs-7 col-md-5 col-lg-3">
      <div id="startdatepicker" class="input-append date start_datetime" style="width:200px" valign=middle>
         <input size="16" type="text" value="2018-03-20 00:00:00.000" readonly="true" placeholder="开始时间" name="starttime" style="width:145px;line-height:28px">
         <span class="add-on"><i class="icon-remove"></i></span>
         <span class="add-on"><i class="icon-th"></i></span>
      </div>
   </div>
   <div class="col-md-5">
      <div id="enddatepicker" class="input-append date end_datetime">
         <input id="endTime" size="16" type="text" value="" readonly="true" placeholder="结束时间" name="endtime" style="width:145px;line-height:28px">
         <span class="add-on"><i class="icon-remove"></i></span>
         <span class="add-on"><i class="icon-th"></i></span>
      </div>
   </div>
</td>

js:

页面头部:(貌似bootstrap-datetimepicker-zh-CN.js用来汉化就足够了;

汉化参考文档:https://www.cnblogs.com/javawer/p/4169837.html)

moment-zh-CN 地址:https://cdn.bootcss.com/moment.js/2.22.0/locale/zh-cn.js

<link rel="stylesheet/less" type="text/css" href="/themes/less/skin.less">
<link rel="stylesheet/less" type="text/css" href="/themes/less/datetimepicker.less">
<link rel="stylesheet" type="text/css" href="/themes/common/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/themes/common/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="/themes/common/bootstrap-datetimepicker.min.css" />
<!-- 公共JS -->
<script type="text/javascript" src="/controls/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/scripts/scripts.js"></script>
<script type="text/javascript" src="/controls/jquery/jquery-ui-1.10.3.js"></script>
<script src="/controls/require/require.js"></script>
<script src="/scripts/main.js"></script>
<%--时间日期选择器--%>
<script type="text/javascript" src="/controls/bootstrap/bootstrap.js">
</script>
<script type="text/javascript" src="/controls/bootstrap/moment.js">
</script>
<script type="text/javascript" src="/controls/bootstrap/moment_zh_CN.js">
      </script>

<script type="text/javascript" src="/controls/bootstrap/bootstrap-datetimepicker.js">
</script>
<script type="text/javascript" src="/controls/bootstrap/bootstrap-datetimepicker.zh-CN.js">
</script>
尾部:

$(".start_datetime").datetimepicker({
    format: 'yyyy-MM-dd hh:mm:ss',
    language: "zh-CN",
    pickDate: true,
    pickTime: true,
    hourStep: 1,
    minuteStep: 1,
    secondStep: 1,
    startDate: "2015-01-01 00:00:00",
    minView: "hour",
    todayBtn:true,
    autoclose:true,
    inputMask: true
});
$(".end_datetime")
.datetimepicker({
      format: 'yyyy-MM-dd hh:mm:ss',
      language: 'zh-CN',
      pickDate: true,
      pickTime: true,
      hourStep: 1,
      minuteStep: 1,
      secondStep: 1,
      todayBtn:true,
      autoclose:true,
      inputMask: true
        })
.on('changeDate',function(ev){
    var endtime=$("input[ name='endtime']").val();
    var starttime=$("input[ name='starttime']").val();
    alert("结束时间"+endtime);
          alert(starttime);
          if(starttime!=""&&endtime!="")
   {
      if(starttime>endtime)
      {
                  alert("终止日期不能晚于起始日期,请重新选择!");
                  $("#endTime").val("");
      }
          }
});


阅读更多
文章标签: bootstrap datatimepicker
个人分类: jsp
下一篇Java基础-将数据库得到的时间转换成String
想对作者说点什么? 我来说一句

非常漂亮的100个前端案例

2018年06月04日 47.53MB 下载

前端100款网页案例

2017年05月07日 8.74MB 下载

前端案例分享

2015年01月02日 38.37MB 下载

WEB前端-案例汇总

2017年11月08日 75.01MB 下载

没有更多推荐了,返回首页

关闭
关闭