DateTimePicker范围?

时间:2015-03-19 20:34:37

标签: jquery twitter-bootstrap datetimepicker

我设法实现了一个带有“范围”类型的DatePicker元素,如here所示(选择Range无线电),但是我试图切换到DateTimePicker而不知道如何保持这种布局和格式。

我希望用户点击输入字段时显示日历 - 对按钮显示here不感兴趣。但是,每当我删除该按钮的<span>元素时,整个事情就会中断,不确定原因。

以下是代码:

<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    <input class="form-control" size="16" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" />

JS:

$('.form_datetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1
});

我想知道是否可以为DateTimePicker创建范围类型输入,如果是,我做错了什么?

1 个答案:

答案 0 :(得分:0)

我唯一看到的就是把它们中的两个连在一起。

<div class="container">
        <div class='col-md-5'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker6'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker7'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker6').datetimepicker();
            $('#datetimepicker7').datetimepicker({
                useCurrent: false 
            });
            $("#datetimepicker6").on("dp.change", function (e) {
                $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker7").on("dp.change", function (e) {
                $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>

退房 https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers 这是我得到它的地方,它适用于我。