js datetimepicker控件的时间选择条怎么设置

JavaScript020

js datetimepicker控件的时间选择条怎么设置,第1张

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

主要体现在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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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="glyphiwww.meidiyazx.com/sitemap.xml"></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>

在jsp页面中使用js日期控件

<script src="js/Calendar.js" type="text/javascript" language="javascript"></script>

加入到页面中 js/Calendar.js 这是控件的路径

<input name="txtDate" type="text" onclick="SelectDate(this)" readonly="readonly">

My97DatePicker，将dateFmt设置为"HH:mm:ss"

<input type="text" onclick="WdatePicker({dateFmt:'HH:mm:ss'})" />

效果：