当输入获得焦点并更新日历时如何显示日期选择器日历答案

【问题标题】：How to show datepicker calendar when the input get focus and update calendar当输入获得焦点并更新日历时如何显示日期选择器日历
【发布时间】：2015-12-18 15:45:10
【问题描述】：

我有一个基于此 URL 的日历示例： http://eonasdan.github.io/bootstrap-datetimepicker

这是 HTML 代码：

<div class="form-group col-xs-2 col-md-2">
    <label for="datebirth" class="control-label">Date of Birth</label>
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" id="date-birth" maxlength="10" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>                      
</div>

这是JS代码：

moment.locale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});     

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY'
});

$("#date-birth").on("focus", function() {
    //open calendar
});

我的日历必须在单击日历图标（这没关系）并且输入日期获得焦点时打开，之后，如果我在输入日期字段中写一个 fecha，则必须更新日历窗口自动。

在 URL 中，有一个关于无图标（仅限输入字段）的示例：，但我没有得到解决。

感谢您的帮助。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-datetimepicker

【解决方案1】：

您可以添加allowInputToggle 选项来初始化您的日历，以便在输入获得焦点时也打开它：

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY',
    allowInputToggle: true
});

如果您想在日历第一次打开时输入为空，也可以添加useCurrent: false。

您可以使用keyup 列表器在您键入日期时自动更新日历：

$("#date-birth").on("keyup", function() {
    var dt = moment(this.value, 'DD/MM/YYYY', true);
    if( dt.isValid() ){
        $('#datetimepicker1').data("DateTimePicker").date(dt);
    }
});

【讨论】：

【解决方案2】：

我认为您需要为 datetimepicker 更改 CSS。只需添加如下一行

来自

.bootstrap-datetimepicker-widget {
  list-style: none;
}

到

.bootstrap-datetimepicker-widget {
  list-style: none;
  display: block;
}

【讨论】：