选定日期之后的jQuery Datepicker关闭datepicker [英] jQuery Datepicker close datepicker after selected date
问题描述
HTML:
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="example1">
</div>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
$('#example1').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
我使用bootstrap datepicker。
I use bootstrap datepicker.
我点击它以打开日期,然后选择任何日期。
When I click to datepicker it opens and I select any date.
我的问题:
如果我从datepicker中选择日期,我想关闭datepicker弹出窗口。
If I choose date from datepicker, I want to close datepicker popup.
我做了哪个事件需要使用才能在选择日期关闭datepicker?
Which event do i need to use in order to close datepicker on select date?
编辑:
我找到了解决方案
此作品
$(document).mouseup(function (e) {
$('#example1').Close();
});
但 下面的不起作用?
But this below does not work why ?
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
推荐答案
实际上你不需要替换这一切。 ...
actually you don't need to replace this all....
有两种方法可以做到这一点。一种是使用autoclose属性,另一种(alternativ)方式是在选择Date时使用输入触发的on change属性。
there are 2 ways to do this. One is to use autoclose property, the other (alternativ) way is to use the on change property thats fired by the input when selecting a Date.
HTML
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="Sample 1: Click to show datepicker" id="example1">
</div>
<div class="hero-unit">
<input type="text" placeholder="Sample 2: Click to show datepicker" id="example2">
</div>
</div>
jQuery
$(document).ready(function () {
$('#example1').datepicker({
format: "dd/mm/yyyy",
autoclose: true
});
//Alternativ way
$('#example2').datepicker({
format: "dd/mm/yyyy"
}).on('change', function(){
$('.datepicker').hide();
});
});
这就是你要做的全部:)
this is all you have to do :)
这里是一个特赦 ,了解最新情况。
HERE IS A FIDDLE to see whats happening.
2016年7月13日的Fiddleupdate:CDN不再存在
根据您的编辑:
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
在这里你输入(没有Close-Function)并创建一个Datepicker-Element。如果元素发生了变化,你想关闭它,但你仍然试图关闭输入(没有关闭函数)。
Here you take the Input (that has no Close-Function) and create a Datepicker-Element. If the element changes you want to close it but you still try to close the Input (That has no close-function).
绑定a mouseup事件到文档状态可能不是是最好的主意,因为你将在每次点击时触发所有包含脚本!
Binding a mouseup event to the document state may not be the best idea because you will fire all containing scripts on each click!
多数民众赞成:)
编辑:2017年8月(添加了StackOverFlowFiddle又名代码段。与帖子顶部相同)
$(document).ready(function () {
$('#example1').datepicker({
format: "dd/mm/yyyy",
autoclose: true
});
//Alternativ way
$('#example2').datepicker({
format: "dd/mm/yyyy"
}).on('change', function(){
$('.datepicker').hide();
});
});
.hero-unit{
float: left;
width: 210px;
margin-right: 25px;
}
.hero-unit input{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="Sample 1: Click to show datepicker" id="example1">
</div>
<div class="hero-unit">
<input type="text" placeholder="Sample 2: Click to show datepicker" id="example2">
</div>
</div>
编辑:2018年12月显然Bootstrap-Datepicker不适用于jQuery 3.x 请参阅这个要修复
December 2018 Obviously Bootstrap-Datepicker doesnt work with jQuery 3.x see this to fix
这篇关于选定日期之后的jQuery Datepicker关闭datepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!