- 首页
- 前端开发
- jQuery Datepicker 在选定日期后关闭日期选择器
jQuery Datepicker 在选定日期后关闭日期选择器
[英] jQuery Datepicker close datepicker after selected date
本文介绍了jQuery Datepicker 在选定日期后关闭日期选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML:
<div class="hero-unit"><input type="text" placeholder="点击显示日期选择器" id="example1">
jQuery:
我使用引导日期选择器.
当我点击日期选择器时，它会打开并选择任何日期.
我的问题:
<块引用>
如果我从 datepicker 中选择日期，我想关闭 datepicker 弹出窗口.
我需要使用哪个事件才能在选定日期关闭日期选择器?
已
我找到了解决办法
这有效
$(document).mouseup(function (e) {$('#example1').关闭();});
但是这个下面不起作用为什么?
$('#example1').datepicker().on('changeDate', function (ev) {$('#example1').关闭();});
解决方案
实际上你不需要全部替换 (@Ben Rhouma Zied answere)....
有两种方法可以做到这一点.一种是使用 autoclose 属性，另一种(替代)方法是使用在选择日期时由输入触发的 on change 属性.
HTML
<div class="hero-unit"><输入类型=文本"placeholder="示例 1:单击以显示日期选择器";id="example1">
<div class="hero-unit"><输入类型=文本"placeholder="Sample 2: Click to show datepicker";id=example2">
jQuery
$(document).ready(function () {$('#example1').datepicker({格式:dd/mm/yyyy"，自动关闭:真});//替代方式$('#example2').datepicker({格式:dd/mm/yyyy"}).on('改变', function(){$('.datepicker').hide();});});
这就是你所要做的:)
这是一把小提琴，看看发生了什么.>
2016 年 7 月 13 日 Fiddleupdate:CDN 不再存在
根据您的
$('#example1').datepicker().on('changeDate', function (ev) {$('#example1').关闭();});
在这里您获取输入(没有关闭功能)并创建一个日期选择器元素.如果元素发生变化，您想关闭它，但您仍然尝试关闭输入(没有关闭功能).
<块引用>将 mouseup 事件绑定到文档状态可能不是最好的主意，因为每次点击都会触发所有包含脚本！
就是这样:)
2017 年 8 月(添加了 StackOverFlowFiddle aka Snippet.与帖子顶部相同)
$(document).ready(function () {$('#example1').datepicker({格式:日/月/年"，自动关闭:真});//替代方式$('#example2').datepicker({格式:日/月/年"}).on('改变', function(){$('.datepicker').hide();});});
.hero-unit{向左飘浮;宽度:210px；右边距:25px；}.hero-unit 输入{宽度: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="容器"><div class="hero-unit"><input type="text" placeholder="Sample 1: 点击显示日期选择器" id="example1">
<div class="hero-unit"><input type="text" placeholder="Sample 2: 点击显示日期选择器" id="example2">
2018 年 12 月显然 Bootstrap-Datepicker 不适用于 jQuery 3.x 看到这个来修复
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>
I use bootstrap datepicker.
When I click to datepicker it opens and I select any date.
My question:
If I choose date from datepicker, I want to close datepicker popup.
Which event do i need to use in order to close datepicker on select date?
Edited:
I have found a solution
This works
$(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 (@Ben Rhouma Zied answere)....
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.
Fiddleupdate on 13 of July 2016: CDN wasnt present anymore
According to your EDIT:
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
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).
Binding a mouseup event to the document state may not be the best idea because you will fire all containing scripts on each click!
Thats it :)
EDIT: August 2017 (Added a StackOverFlowFiddle aka Snippet. Same as in Top of Post)
$(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>
EDIT: December 2018 Obviously Bootstrap-Datepicker doesnt work with jQuery 3.x see this to fix
这篇关于jQuery Datepicker 在选定日期后关闭日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
