引导日期选择器弹出窗口未显示突出显示的当前日期
Posted
技术标签:
【中文标题】引导日期选择器弹出窗口未显示突出显示的当前日期【英文标题】：Bootstrap datepicker pop-up not shown the highlighted current date 【发布时间】：2014-03-06 20:34:23 【问题描述】：我通过 Bootstrap-datepicker API 使用 Bootstrap 日期选择器。当我单击按钮时，会显示日历/日期选择器弹出窗口，但它没有将当前日期标记为蓝色字体，如 API 示例中所示。
我正在使用以下代码：
<body>
<div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="form-control" size="56" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#datepicker').datepicker();
</script>
</body>
显示日历/日期选择器弹出窗口，但当前日期未突出显示为蓝色，如 API 示例中所示，并且鼠标光标不是指针。
请帮我解决这个问题
【问题讨论】：
确保为字形添加了字体。如果包含字体，则“glyphicon”类可以工作 【参考方案1】：如果您使用的是：https://github.com/eternicode/bootstrap-datepicker，则必须在启动日历时提供选项，例如
$('#sandbox-container input').datepicker(
todayHighlight: true
);
【讨论】：
你能做一个jsfiddle吗？会有帮助的 这没有回答原始问题。该设置标记了查看时的日期，而不是当前选择的日期。【参考方案2】：$('#datepicker').datepicker(
format: 'dd-mm-yyyy',
todayHighlight: true
);
这里是JSFiddle
【讨论】：
【参考方案3】：Bootstrap Datepicker 依靠自己的 CSS 来设置日历小部件的样式。
为了快速导入依赖，您可以从 cdnjs 中选择一个版本（确保选择 .css 扩展名）并像这样导入到您的 html 中：
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
【讨论】：
【参考方案4】：只是添加到可能的解决方案列表中，因为我遇到了同样的问题。 today 类没有被分配到当天使用：
$('.datepicker').datepicker(
'format': 'mm/dd/yyyy',
'todayHighlight': true
);
示例中的 html 只有一个 date 类。
<div class="input-group date">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
就我而言，我错过了datepicker 课程。将其添加到元素中，现在一切正常。
需要：
<div class="input-group date datepicker">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
【讨论】：
【参考方案5】：另一种选择是将此属性添加到您的 datepicker 输入元素：
today-highlight="true"
【讨论】：
【参考方案6】：如果您使用的是响应式表单，那么您还可以像这样在您的 formGroup 初始化中将今天的日期设置为一个值
myform = new FormGroup(
name: new FormControl('', [Validators.required]),
event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
)
【讨论】：
以上是关于引导日期选择器弹出窗口未显示突出显示的当前日期的主要内容，如果未能解决你的问题，请参考以下文章