<!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. hibernate 一张数据表的流程

    1. 写一个domain类来映射数据库表 2. 写一个*.hbm.xml文件来配置映射 <?xml version="1.0"?> <!DOCTYPE hiber ...

  2. Yukari's Birthday

    hdu4430:http://acm.hdu.edu.cn/showproblem.php?pid=4430 题意:题目的意思就是给你一个s,让你求k,r,其中k,r,满足:k^1+k^2+..... ...

  3. QiQi and Bonds

    只有链接:http://sdu.acmclub.com/index.php?app=problem_title&id=961&problem_id=23685 题意:现在有n个QiQi ...

  4. Squares<哈希>

    Description A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-d ...

  5. 【转】java 容器类使用 Collection，Map，HashMap，hashTable，TreeMap，List，Vector，ArrayList的区别

    原文网址:http://www.360doc.com/content/15/0427/22/1709014_466468021.shtml java 容器类使用 Collection,Map,Hash ...

  6. WPF之插件开发

    一:解决方案管理器截图 效果图: 二:简单功能说明 IMsg定义了一个接口,MYPlugin1实现接口功能,”插件式开发“实现程序运行时再调用非本身引用的dll文件,调用该dll的方法实现功能 三:I ...

  7. 数学概念——A 几何概型

    You are going from Dhaka to Chittagong by train and you came to know one of your old friends is goin ...

  8. WebView js 调用Java本地方法

    webView = (WebView) this.findViewById(R.id.webview); WebSettings webSettings = webView.getSettings() ...

  9. [Locked] Shortest Distance from All Buildings

    Shortest Distance from All Buildings You want to build a house on an empty land which reaches all bu ...

  10. 《Euclidea3》-Eta-07

    Q: 分析:考虑到充分利用三等分和角度的信息,这里我们只需做出一个36°的角即可. 考虑一个顶角是36°的等腰三角形.如下图. 设AD=a1,CD=a2,根据相似,易得a1:a2=(√5-1)/2. ...