bootstrap-datetimepicker 日期控件的開始日期

時間 2019-11-12

標籤 bootstrap datetimepicker 日期控件開始欄目 Bootstarp 简体版

原文原文鏈接

今天作日期控件，需求要求設置一個時間範圍限制，選擇從今天開始的日期才能夠選擇，今天之前都不能夠選擇javascript

主要體如今bootstrap-datetimepicker控件下面的2個日期參數java

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

引用的基礎庫有jquery

<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代碼bootstrap

<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代碼ide

    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),
    });

附：精確到分的時間、年月日、時間、年月、月日、從今天開始、到今天結束spa

HTML3d

<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

JScode

$('.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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。