Javascript 引导日期选择器：选择特定日期时显示DIV
将与嵌入的标记一起使用 如何在选择特定日期时显示/显示DIV元素，并在选择其他日期时再次隐藏它Javascript 引导日期选择器：选择特定日期时显示DIV,javascript,jquery,datepicker,bootstrap-4,bootstrap-datepicker,Javascript,Jquery,Datepicker,Bootstrap 4,Bootstrap Datepicker,将与嵌入的标记一起使用 如何在选择特定日期时显示/显示DIV元素，并在选择其他日期时再次隐藏它 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style>
#example {
display: none;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div id="example">Yay my favorate day!</div>
Please select <b>11/07/2017</b> to show an example:
<br />
<div id="myCalendar"></div>
<input type="hidden" id="hiddenInput">
<script>
$(function() {
$('#myCalendar').datepicker({
format: 'mm-dd-yyyy',
weekStart: 1,
maxViewMode: 2,
todayBtn: "linked",
daysOfWeekHighlighted: "0,6",
todayHighlight: true
}).on('changeDate', function() {
$('#hiddenInput').val(
$('#myCalendar').datepicker('getFormattedDate')
);
}).change(function() {
$("#example").toggle($(this).val() === "11-07-2017");
});
});
</script>
</body>
#范例{
显示：无；
颜色：绿色；
字体大小：粗体；
}
耶，我最喜欢的一天！
请选择2017年7月11日以显示示例：
$（函数（）{
$（“#myCalendar”）.datepicker({
格式：“mm dd yyyy”，
周开始：1，
maxViewMode:2，
今日BTN：“链接”，
daysOfWeekHighlighted:“0,6”，
今天的亮点：真的
}).on（'changeDate'，function（）{
$（'hiddenInput'）.val(
$（“#myCalendar”）.datepicker（'getFormattedDate'））
);
}).change（函数（）{
$（“#示例”）.toggle（$（this.val（）=“11-07-2017”）；
});
});
您可以通过检查
日期选择器的值来执行此操作。在本例中，我使用2017年7月11日$（函数（）{
$（'.datepicker'）.datepicker({
格式：“mm dd yyyy”
}).改变（功能）{
$（“#示例”）.toggle（$（this.val（）=“11-07-2017”）；
});
});
#示例{
显示：无；
}
耶，我最喜欢的一天！
请选择2017年7月11日以显示示例：
对于不同的框架（以及普通的js），有几种方法。例如，如果您使用的是angularjs（不需要太多javascript代码），那么这是一个简单的例子：
您可以使用事件，如下所示：
所有事件都将附加到传递给任何事件处理程序的事件对象的额外数据
date
：本地时区中的相关日期对象。对于多日期选取器，这将是选取的最新日期
您可以使用jQuery和检查所选日期（使用setter，如getDate（）
、getMonth（）
和getFullYear（）
）以及
这里有一个活样本：
$（函数（）{
$（“#myCalendar”）.datepicker({
格式：“mm dd yyyy”，
周开始：1，
maxViewMode:2，
今日BTN：“链接”，
daysOfWeekHighlighted:“0,6”，
今天的亮点：真的
}).on（'changeDate'，函数（e）{
如果（e.date&&e.date.getDate（）==7&&
e、 date.getMonth（）==10&&
e、 日期。getFullYear（）=2017年）{
$（“#示例”）.show（）；
}否则{
$（“#示例”）.hide（）；
}
$（'hiddenInput'）.val(
$（“#myCalendar”）.datepicker（'getFormattedDate'））
);
});
});
#示例{
显示：无；
颜色：绿色；
字体大小：粗体；
}
耶，我最喜欢的一天！
请选择2017年7月11日以显示示例：
我使用slideUp/slideDown显示/隐藏事件中的元素作为示例。当事件发生时，可以编写一些内容来显示/隐藏div或其他元素（例如，等于所选日期的div的ID）。到目前为止，您尝试了什么？请记住，堆栈溢出不是代码编写服务。请学习如何编写有效的问题。@VincenzoC我已经更新了我的问题，以显示到目前为止我在使用什么。如何使用嵌入式版本（没有输入字段）？这很好。非常感谢。
<input data-provide="datepicker" ng-model='yourdate'>
<div id='divExample' ng-show='yourdate==somevalue'></div>