Repository navigation
datepicker auto closed #232
Description
Activity
Well known on Chrome.
I'll try to look into itI'm using Daemonite/material as one of providers for my components library and I'm also getting this auto-close issue for date picker: https://materialdemo.blazorise.com/tests/forms
It would be great if it could be fixed. tnx
Hello,
Any updates on this issue?Reacted by Mladen MacanovićThere's a workaround for this issue. Tested on Chrome Version 78.0.3904.108 (Official Build) (64-bit)
When initializing the datepicker use the following:
$('[id*="inputDatePicker"]').on('mousedown', function (event) { event.preventDefault(); }).pickdate()In this case I'm applying this for all id's that contains inputDatePicker :)
Let me know if this helped you.
Regards,
Sérgio
Reacted by Willian GruberOr include these AFTER material.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/compressed/picker.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/compressed/picker.date.js"></script>@srebelo001 @djibe I tried both examples and still it doesn't work. Maybe I'm missing something.
$(`[id*="${elementId}"]`).on('mousedown', function (event) { event.preventDefault(); }).pickdate({ ok: '', cancel: 'Clear', today: 'Today', closeOnCancel: true, closeOnSelect: true, container: 'body', containerHidden: 'body', firstDay: 1, // monday format: 'dd.mm.yyyy', formatSubmit: formatSubmit, onClose: function (s) { // trigger onchange event on the DateEdit component mutateDOMChange(elementId); } });
Are you sure this markup doesn't work ?
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- Add Material JavaScript on top of Bootstrap JavaScript --> <script src="https://daemonite.github.io/material/js/material.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/compressed/picker.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/compressed/picker.date.js"></script>And
$('#exampleInputDatePicker1').pickdate();OK everyone I fixed it.
Replace the official material.js by my new version :
<script src="https://cdn.jsdelivr.net/gh/djibe/material@eae2358/js/material.min.js"></script>The picker is not autoclosing.
To remove the systematic readonly attribute, you can set
$('#exampleInputDatePicker1').pickadate({ editable: true });I copied code from latest pickadate version (picker and picker.date) to material.js.
Changed a bit the top of the file for imports to work well.
You can explore my material.js : https://cdn.jsdelivr.net/gh/djibe/material@eae2358/js/material.min.jsI'm struggling trying to build material from Github repo.
EnjoyEasier way is to download Material 2 from my fork : https://github.com/djibe/material/tree/master
Thats essentially what I plan to do. Ther's no reason to fix old bootstrap fork. Thank you for all the effort so far!
This question is repeated in Issues.
Use my fork instead : https://djibe.github.io/material/docs/4.5/material/pickers/
When I click on an input to show the date picker, it is shown and hidden automatically.