Question

我想在日期字段和另一个时间字段之间建立关系因此，当我选择日期时，它会给我这个日期的有效时间进行预约，在我选择开始时间之后，它会给我在他们的领域的结束时间，它必须是开始时间+30分钟

HTML代码

＆＃13;

<div class="col-1-4 col-1-4-sm">
                <div class="controls">
                    <input type="date" id="date" class="floatLabel form_date " name="arrive" >
                    <label for="arrive" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Day</label>
                    <input type="date" class="datetimepicker" id="Linked" value="" readonly>
                </div>


            </div>
            <div class="col-1-4 col-1-4-sm">
                <div class="controls">
                    <input type="date" id="Start" class="floatLabel form_time" name="depart" />
                    <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;start time</label>
                </div>
            </div>

            <div class="col-1-4 col-1-4-sm">
                <div class="controls">
                    <input type="date" id="End" class="floatLabel" name="depart"  />
                    <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;end time</label>
                </div>
            </div>

＆＃13;

JavaScript的：

＆＃13;

var dateToday = new Date();

$(function () {
    
    $('.form_date').datetimepicker({
        //language:  'fr',
        format:'dd/mm/yyyy',
        //startDate: new date(),
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        startDate: dateToday,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        linkField: "Linked",
        linkFormat: "DD"
    });
    $('.form_time').datetimepicker({
        //language:  'fr',
        format:'H:ii p',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        startDate: dateToday,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 1,
        showMeridian: 1,
        minuteStep: 30,

        linkField: "End",
        linkFormat: "h:ii+30 p"

    });

});

＆＃13;

Answer 1

前一段时间我尝试了类似的东西并决定不使用 bootrap-datetimepicker 因为它不适合我的需要。 Y决定使用这个plugin它有点灵活。查看onChangeDatetime回调和allowedTimes属性。我不确定当日期和时间都发生变化时，或者只是其中一个时，是否触发了回调。可能有助于将日期和时间字段分开。

我想用datetimepicker创建相关的Time字段

1 个答案: