如何在 bootstrap-datetime 选择器中使用今天和明天按钮？答案

【问题标题】：How to use today & tomorrow button with bootstrap-datetime picker?如何在 bootstrap-datetime 选择器中使用今天和明天按钮？
【发布时间】：2014-03-24 11:19:03
【问题描述】：

我用 bootstrap-datetimepicker 做了这个。但我需要今天和明天的按钮和布局应该如下。我该怎么做？

HTML代码：

<div class='col-md-6'>
    <label class=" text-info">Depart</label>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker1' data-date-format="DD-MM-YYYY">
            <input type='text' class="form-control" placeholder="DD-MM-YYYY" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-6'>
    <label class=" text-info">Return</label>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker2' data-date-format="DD-MM-YYYY">
            <input type='text' class="form-control" placeholder="DD-MM-YYYY" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

Javascript

$(function() {
    //Depart & Return Date Time Picker
    $('#datetimepicker1').datetimepicker({
        pickTime: false,
        todayBtn: true
    });
    $('#datetimepicker2').datetimepicker({
        pickTime: false
    });

});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap datepicker

【解决方案1】：

您需要执行以下操作：

为点击“今天”和“明天”选项编写事件以更新您显示的“月/日/日”。
连接DatePicker的Onselect事件，即选择日期时，使用此日期选择以更新您的“月/日/日 em>”。
李>

这样你应该可以完成这项工作。

【讨论】：

你能详细告诉我吗？

【解决方案2】：

这是获取您正在寻找的布局的 html，仅使用引导类：

<div class='col-md-6'>
    <label class="text-info">Depart</label>
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default btn-xs">Today</button>
        <button type="button" class="btn btn-default btn-xs">Tomorrow</button>
    </div>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker1' data-date-format="DD-MM-YYYY">
            <input type='text' class="form-control" placeholder="DD-MM-YYYY" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-6'>
    <label class="text-info">Return</label>
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default btn-xs">Today</button>
        <button type="button" class="btn btn-default btn-xs">Tomorrow</button>
    </div>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker2' data-date-format="DD-MM-YYYY">
            <input type='text' class="form-control" placeholder="DD-MM-YYYY" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

【讨论】：

感谢您的回复。实际上我需要javascript来更新今天或明天点击的日期字段。日期显示为我的第二张图片，而不是文本字段。
在这种情况下，您可以使用浏览器中的 F12 工具查看您尝试复制的控件中的样式。