How to prevent date-picker popup on initial page load
Question
I am using jquery for date picker.It always popup when page loading or refresh. 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 answers
solution1
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/
A working example on JSFiddle is : https://jsfiddle.net/d3pzt1ga/
solution2
0 2016-05-24 06:21:43
设置bound: false,或者在datepiker之前添加一个输入，这样datepiker就不会被聚焦
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.