如何防止初始页面加载时的日期选择器弹出窗口
[英]How to prevent date-picker popup on initial page load
问题描述
I am using jquery for date picker.It always popup when page loading or refresh. 
我正在使用jquery作为日期选择器。它总是在页面加载或刷新时弹出。 How to stop the automatic popup of date picker and the date picker only appear when the text box clicked. 如何在单击文本框时仅显示日期选择器和日期选择器的自动弹出窗口。 Here is my coding 这是我的编码
<html>
<body>
<form>
<div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding"> <input type="text" id="datepicker" name="dob" class="form-control" placeholder="DOB" autocomplete="off" required>
</div>
</form>
</body>
</html>
date picker script: 日期选择器脚本：
<script src="js/functions.js"></script>
<script src="js/pikaday.js"></script>
<script>
var picker = new Pikaday(
{
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: new Date(1950, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [1950, 2020],
bound: true,
});
</script>
2 个解决方案
解决方案1
0 2016-05-24 06:21:26
Add an event listener to the input field and initialize the date picker only when the input field is clicked as shown below : 将一个事件监听器添加到输入字段，并仅在单击输入字段时初始化日期选择器，如下所示：
var dateField = document.getElementById('datepicker');
dateField.addEventListener("click", function(){
// Initialize datepicker only when datefile is clicked
var picker = new Pikaday(
{
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: new Date(1950, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [1950, 2020],
});
});
Reference on pikaday : http://dbushell.github.io/Pikaday/ 关于pikaday的参考： http ：//dbushell.github.io/Pikaday/
A working example on JSFiddle is : https://jsfiddle.net/d3pzt1ga/ 关于JSFiddle的一个工作示例是： https ：//jsfiddle.net/d3pzt1ga/
解决方案2
0 2016-05-24 06:21:43
设置bound: false,或者在datepiker之前添加一个输入，这样datepiker就不会被聚焦
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.