[英]Bootstrap-Datepicker not selecting date when using “setDate”
[英]bootstrap-datepicker: Show DIV when selecting specific date
使用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.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>
您可以通过检查datepicker
的值来实现。 在这个例子中我使用11/07/2017
为你检查(又名二○一七年十一月一十七日)的日期。
$(function(){ $('.datepicker').datepicker({ format: 'mm-dd-yyyy' }).change(function () { $("#example").toggle($(this).val() === "11-07-2017"); }); });
#example { display:none; }
<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> <div id="example">Yay my favorate day!</div> Please select <b>11/07/2017</b> to show an example: <br /> <input type="text" class="datepicker" placeholder="Date..." name="date">
有几种方法可以用于不同的框架(和Vanilla js)。 例如,如果您使用的是angularjs(不需要太多的JavaScript代码),那么这很简单:
<input data-provide="datepicker" ng-model='yourdate'>
<div id='divExample' ng-show='yourdate==somevalue'></div>
您可以使用changeDate
事件,如文档所述 :
所有事件的事件对象都有附加的数据,这些数据将传递给任何事件处理程序
date
:相关的Date对象,以本地时区表示。 对于多日期选择器,这将是最近选择的日期。
您可以检查选定的日期是什么(使用诸如getDate()
, getMonth()
和getFullYear()
)以及使用jQuery show()
和hide()
。
这是一个现场样本:
$(function() { $('#myCalendar').datepicker({ format: 'mm-dd-yyyy', weekStart: 1, maxViewMode: 2, todayBtn: "linked", daysOfWeekHighlighted: "0,6", todayHighlight: true }).on('changeDate', function(e) { if( e.date && e.date.getDate() == 7 && e.date.getMonth() == 10 && e.date.getFullYear() == 2017 ){ $("#example").show(); } else { $("#example").hide(); } $('#hiddenInput').val( $('#myCalendar').datepicker('getFormattedDate') ); }); });
#example { display: none; color: green; font-weight: bold; }
<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"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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> <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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.