datepicker auto closed

[rhernandez-itemsoft]

When I click on an input to show the date picker, it is shown and hidden automatically.

[djibe]

Well known on Chrome.
I'll try to look into it

[stsrki]

I'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

[WillianGruber]

Hello,
Any updates on this issue?

[srebelo001]

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

[djibe]

Or 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>

[stsrki]

@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);
    }
});

[djibe]

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();

[djibe]

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
});

[stsrki]

@djibe I will try the fix tonight when I get back home. Will let you know

[stsrki]

@djibe I tried your script and the picker is now working. Can we know what you changed to make it work?

[djibe]

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.js

I'm struggling trying to build material from Github repo.
Enjoy

[djibe]

Easier way is to download Material 2 from my fork : https://github.com/djibe/material/tree/master

[stsrki]

Thats essentially what I plan to do. Ther's no reason to fix old bootstrap fork. Thank you for all the effort so far!