bootstrap datetimepicker 时间段选择限制

<!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>
时间: 2024-07-31 14:33:37

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

物联网平台设计心得:DateTimePicker实现选择联动

所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是很常用的一个功能.下面我们就来看看如何设计. DateTimePicker的选取与使用 在这里,我们使用的DateTimePicker是一个开源的组件,他的model名称为:ui.bootstrap.datetimepicker,我们可以去这个网址找到其相关的内容:http://dalelotts.

javascript的时间段选择

最近要在页面上加一个时间段的选择控件,便上网搜寻一番,但找到的答案大都没有考虑时间段跨年的情况,所以做了些修改 本周的开始和结束日期 ? 1 2 3 4 5 6 7 8 9 //当前日期 var now = new Date(); //今天是一周的第几天 var nowDayForWeek = now.getDay() === 0 ? 7 : now.getDay(); var oneDay = 1000 * 60 * 60 * 24; //本周开始日期 var weekStartDay = n

Angular Js -moment Picker 时间插件(时间段选择)

Angular Js -moment Picker  时间插件(时间段选择) 一.moment Picker  插件的下载.引用及配置就不在多说了,直接暴力上代码 二.Html <span>{{ctrl.newchoose}}</span> <span id='#showEndTimeError' placeholder="请选择日期" moment-picker="ctrl.chooseFormatted" format="

bootstrap datetimepicker兼容ie8

bootstrap datetimepicker兼容ie8 (2015-06-09 16:14:00) 转载▼   分类: js 错误:由于ie8不支持indexOf这个方法,所以在引入bootstrap-datetimepicker.js的时候在ie8中会js引入错误. 解决: 在bootstrap-datetimepicker.js文件前面加入 if (!Array.prototype.indexOf){ Array.prototype.indexOf = function(elt ){ v

bootstrap的datetimepicker只选择月份

本文转载自:http://blog.csdn.net/feng1603/article/details/41869523 直接上代码: //选择年月日的 startView: 2, minView: 2, format: 'yyyymmdd', $('#datetimepicker').datetimepicker({ format: 'yyyymmdd', weekStart: 1, autoclose: true, startView: 2, minView: 2, forceParse:

bootstrap datetimepicker时间日期控件

github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based on twitter bootstrap (supports Bootstrap v2 and v3) http://www.malot.fr/bootstrap-datetimepicker/ 绑定输入框,并设置format选项: <input type="text" value=&

在asp.net mvc4项目里bootstrap datetimepicker控件的使用

前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中的重中之重,它需要满足“格式化”,“易输入”这两点,对短信费用关心的开发者要知道长短信是两条短信费用之和,因此,例会时间不能随意交给用户自定义输入:要考虑到“易输入”这点,只能选择日期选择控件来辅助用户输入,由于日期选择控件较为小巧使用,在页面中引入并不是难事.在本篇文章中,使用的是bootstra

bootstrap datetimepicker 复选可删除,可规定指定日期不可选

可实现类似于酒店预订的功能.支持日期多选,日期重复选择取消等功能. datetimepicker去网上下载 很多, 只需要取到 bootstrap-datetimepicker.min.js bootstrap-datetimepicker.min.css 两个文件即可 JS: <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="

BootStrap DateTimePicker的使用

使用方法 1. 添加资源 2. 编写代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <link href="C