zoukankan      html  css  js  c++  java
  • bootstrap-datetimepicker 日期控件的开始日期

    今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择

    主要体现在bootstrap-datetimepicker控件下面的2个日期参数

    weekStart: 1, 
    startDate:new Date(日期),

    引用的基础库有

    <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.fr.js" charset="UTF-8"></script>

    HTML代码

    <div class="form-group">
        <label for="dtp_input3" class="col-md-2 control-label">time start</label>
        <div class="input-group date form_date_start col-md-3">
            <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-time"></span></span>
        </div>
        <input type="hidden" id="dtp_input3" value="" />
    </div>

    JS代码

        var newDate = new Date();
        var t       = newDate.toJSON(); 
        $('.form_date_start').datetimepicker({
            format: 'yyyy-mm-dd',
            language:  'fr',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            weekStart: 1, 
             startDate:new Date(t),
        });

    附:精确到分的时间、年月日、时间、年月、月日、从今天开始、到今天结束

    HTML

    <div class="container">
        <form action="" class="form-horizontal"  role="form">
            <fieldset>
                <legend>Test</legend>
                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                    <div class="input-group date form_datetime col-md-5"   >
                        <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-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" 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" >
                        <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_input3" class="col-md-2 control-label">Time Picking</label>
                    <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" /><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">month Picking</label>
                    <div class="input-group date form_month col-md-5">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" /><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">month date Picking</label>
                    <div class="input-group date form_month_date col-md-5">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" /><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">year Picking</label>
                    <div class="input-group date form_year col-md-5">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" /><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">time start</label>
                    <div class="input-group date form_date_start col-md-3">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" />
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">time end</label>
                    <div class="input-group date form_date_end col-md-3">
                        <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-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value="" />
                </div>
            </fieldset>
        </form>
    </div>
    View Code

    JS

    $('.form_datetime').datetimepicker({
        //精确到分的时间
        format: 'yyyy-mm-dd - HH:ii p',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        minuteStep : 1
    });
    $('.form_date').datetimepicker({
        //年月日
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        //时间
        format:"hh:ii",
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        minuteStep : 1
    });
    $('.form_month').datetimepicker({
        //年月
        format: 'yyyy-mm',  
         weekStart: 1,  
         autoclose: true,  
         startView: 3,  
         minView: 3,  
         forceParse: false,  
         language: 'zh-CN'
    });
    $('.form_month_date').datetimepicker({
        //月日
        format:"mm-dd",
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_year').datetimepicker({
        format: 'yyyy-mm',  
         weekStart: 1,  
         autoclose: true,  
         startView: 4,  
         minView: 4,  
         forceParse: false,  
         language: 'zh-CN' 
        
    });
    
    var newDate = new Date();
    var t       = newDate.toJSON(); 
    $('.form_date_start').datetimepicker({
        //从今天开始
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        weekStart: 1, 
        startDate:new Date(t),
    });
    $('.form_date_end').datetimepicker({
        //到今天结束
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        weekEnd: 1, 
        endDate:new Date(t),
    });
    View Code
  • 相关阅读:
    java System.getProperty()参数大全
    元类(转自https://zhuanlan.zhihu.com/p/23887627)
    正则(高级)(转)
    正则(转)
    机器学习入门之房价预测(线性回归)
    python字节码(转)
    在虚拟机中搭建django,通过外网访问
    django框架入门
    linux下创建虚拟环境(转)
    PAT1005
  • 原文地址:https://www.cnblogs.com/zhixi/p/5481985.html
Copyright © 2011-2022 走看看