<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link href="./bootstrap/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_input2" class="col-md-2 control-label">Date Picking</label>

                <div class="input-group date form_date col-md-5" id="start-date" 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_input2" class="col-md-2 control-label">Date Picking</label>

                <div class="input-group date form_date col-md-5" id="end-date" 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>

        </fieldset>

    </form>

</div>

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<script type="text/javascript">

    var startDate = new Date(new Date().getTime() - 7 *24 * 60* 60 * 1000);

    var endDate = new Date();

    $('#start-date').datetimepicker({

        initialDate:startDate,

        language:  'zh-CN',

        weekStart: 1,

        todayBtn:  1,

        autoclose: 1,

        todayHighlight: 1,

        startView: 2,

        minView: 2,

        forceParse: 0,

        endDate:endDate

    }).on('changeDate', function(ev){

        startDate = ev.date;

        $('#end-date').datetimepicker('setStartDate', startDate);

    });

    $('#end-date').datetimepicker({

        initialDate:endDate,

        language:  'zh-CN',

        weekStart: 1,

        todayBtn:  1,

        autoclose: 1,

        todayHighlight: 1,

        startView: 2,

        minView: 2,

        forceParse: 0,

        startDate:startDate,

        endDate:endDate

    }).on('changeDate', function(ev){

        endDate = ev.date;

        $('#start-date').datetimepicker('setEndDate', endDate);

    });

</script>

</body>

</html>

bootstrap datetimepicker 时间段选择限制的更多相关文章

  1. bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

    jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...

  2. 物联网平台设计心得：DateTimePicker实现选择联动

    所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...

  3. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  4. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

  5. bootstrap datetimepicker的参数解释

    使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...

  6. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  7. bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式

    不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...

  8. bootstrap datetimepicker 位置错误

    bootstrap datetimepicker 位置错误,大致问题跟其他网友描述的一样,页面自动出滚动条,然后datetimepicker飘到页脚,网上的方法都是修改place方法里面的555行左右 ...

  9. bootstrap --datetimepicker之时间段选择

    文件引入 <script type="text/javascript" src="css/jquery-3.2.1.js"></script& ...

随机推荐

  1. Servlet常用类

    javax.servlet.ServletConfig;javax.servlet.ServletException;javax.servlet.http.HttpServlet;javax.serv ...

  2. 转:Java架构师与开发者提高效率的10个工具

    原文来自于:http://www.importnew.com/14624.html Java受到全球百万计开发者的追捧,已经演变为一门出色的编程语言.最终,这门语言随着技术的变化,不断的被改善以迎合变 ...

  3. oracle利用merge更新一表的某列数据到另一表中

    假设你有两张表 t1 表 -------------------------- id |    name   |   pwd 1  |      n1     | t2 表 ------------- ...

  4. 有趣的TWinControl.RecreateWnd，并分析在哪些场合使用

    CM_RECREATEWND = CM_BASE + 51; // TWinControl里有对应函数procedure CMRecreateWnd(var Message: TMessage); m ...

  5. STL中的Traits编程技法

    最近在看读<STL源码剖析>,看到Traits编程技法这节时,不禁感慨STL源码作者的创新能力.那么什么是Traits编程技法呢?且听我娓娓道来: 我们知道容器的许多操作都是通过迭代器展开 ...

  6. LightOJ 1135(线段树)

    题解引自:http://www.cnblogs.com/wuyiqi/archive/2012/05/27/2520642.html 题意: 有n个数,刚开始都为0 add i , j 给i,j区间内 ...

  7. HDU 5876 Sparse Graph 【补图最短路 BFS】(2016 ACM/ICPC Asia Regional Dalian Online)

    Sparse Graph Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  8. Unity Dx9 Occlusion Query plugin

    //Occlusion Unity plugin #include "UnityPluginInterface.h" #include <math.h>#include ...

  9. HDU1251 统计难题（Trie）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  10. postgresql使用文档之一 初始化数据存储区

    17.2. 创建一个数据库集群(Database Cluster) 在你能做任何事情之前,你必须在磁盘上初始化一块存储空间.我们称这为一个数据库集群(database cluster). 一个Data ...