前端-bootstrap-datatimdepicker案例

原创 2018年04月17日 11:24:56

官方文档: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("");
      }
          }
});


前端开发——个人作品案例

2014年08月-10月:华思网络仿真云网站; 2014年07月中旬至月底:华侨大学模拟联合国协会MUN网站http://www.wsmun.org/; 2014年07月月初至中旬:个人雅思培训网...
  • chen794252446
  • chen794252446
  • 2014-10-17 17:45:07
  • 2426

Web前端案例_多选练习案例

Web前端案例_多选练习案例 关于多选框的checked属性以及span标签的innerhtml属性的练习。 1.案例分析 利用多选框的checked属性以及span标签的innerHTML属性实现此...
  • Ag_nevergiveup
  • Ag_nevergiveup
  • 2017-07-04 16:40:20
  • 656

WEB前端-案例汇总

  • 2017年11月08日 00:48
  • 75.01MB
  • 下载

前端 jquery-ajax 的简单案例分析和总结

ajax,顾名思义:异步的 JavaScript 和 XML。在不重新加载整个页面的情况下,AJAX 是与服务器交换数据并更新部分网页的艺术。ajax特别适合用在那些需要不刷新页面形式一定功能的页面中...
  • lensgcx
  • lensgcx
  • 2017-01-20 13:48:12
  • 4282

前端100款网页案例

  • 2017年05月07日 08:25
  • 8.74MB
  • 下载

前端案例分享

  • 2015年01月02日 11:24
  • 38.37MB
  • 下载

前端项目案例

脚手架市场http://scaffold.ant.design/#/
  • qq_28058443
  • qq_28058443
  • 2017-10-18 18:28:13
  • 111

电商网站前端开发——案例

  • 2015年07月16日 20:52
  • 15.01MB
  • 下载

Web前端实战及经验收集

> 先写html代码 然后在加入JS和CSS样式的 js 上拉加载,下拉刷新DEMO- http://download.csdn.net/download/qq_35194926/9571050 j...
  • ShareUs
  • ShareUs
  • 2017-02-27 22:29:19
  • 2374

前端基础案例分享:制作百度换肤效果

知识点:html加css,标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、逻辑思维。...
  • qq_39345165
  • qq_39345165
  • 2017-10-28 13:12:50
  • 217
收藏助手
不良信息举报
您举报文章:前端-bootstrap-datatimdepicker案例
举报原因:
原因补充:

(最多只允许输入30个字)