Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Pickadate dialog dosen't close on select bug
See original GitHub issueI have the following basic code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/bower_components/pickadate/lib/compressed/themes/default.css">
<link rel="stylesheet" href="/bower_components/pickadate/lib/compressed/themes/default.date.css">
<link rel="stylesheet" href="/bower_components/pickadate/lib/compressed/themes/default.time.css">
</head>
<body>
<label>
Start Date:
<input type="date" name="start_date" class="datepicker">
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/bower_components/pickadate/lib/picker.js"></script>
<script src="/bower_components/pickadate/lib/picker.date.js"></script>
<script>
$('.datepicker').pickadate({
closeOnSelect: true, // should be default
});
</script>
</body>
</html>
This code seems to work fine and has no errors on the console. The only issue is when I pick a date, the dialog dosent close automatically like it does on the website: http://amsul.ca/pickadate.js/date/
I am using:
Datepicker: v3.5.6 OS: Windows 10 Browser: 53.0.2785.143 (Official Build) m (64-bit)
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Date picker auto close after selecting the date is not working
I don't see any references to the pickadate library's theme CSS files in your snippet. It's autoclosing for me once I added them....
Read more >Datepicker - Angular Material
By default, clicking on a date in the calendar will select it and close the calendar popup. In some cases this may not...
Read more >Android Date Time Picker Dialog | DigitalOcean
This tutorial is good thanks, but I have a little problem, when I click on the button my datapicker OK and CANCEL does...
Read more >Form Datepicker | Components - BootstrapVue
Note this does not affect the size of the popup calendar dialog. Small date picker. No date selected. Large date picker.
Read more ><input type="date"> - HTML: HyperText Markup Language
Date inputs provide an easy interface for choosing dates, ... Even though the date picker doesn't use it, the text input fallback will....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Great. But why isn’t this bug fix being added to the next minor release. I don’t think it’s a breaking feature. Surely it can be added as a minor version, as it’s just a bug fix.
I have now pinpointed exactly when this bug occurs.
Basically, the bug occurs when an input is wrapped in a label with no “for” attribute like so:
OR
if the for attribute of the label matches the id of the input, while the input is a child element of the label like so:
Both of the above HTML snippets is W3 compliant.
Note the bug does NOT occur when the for tag does not match the id (NOT W3 compliant):
or if the input is not a child element of the label (Is W3 compliant):