How to stop the closing of date-picker on blur?

Question

Problem

I am using pickadate.js and I want my date-picker calendar to remain open on clicking outside the calendar. Thanks in Advance.

What I have tried

Firstly, I have tried picker.set('select', new Date()); , but it also closes the date picker because, if the date is selected, then it is not closing the date picker on clicking the header of the modal, but if we are not initializing the date picker then it closes the date picker on clicking the modal's header.

Answer 1

Each time a picker is opened, an event handler to close it is bound to the document with a particular namespace ( $document.on( 'click.' + STATE.id) in the code). Then the code triggers the 'open' events.
By binding an event handler on this 'open' event, we can immediately unbind the document event that closes the picker (with the specific id).

 var input = $('.datepicker').pickadate(), picker = input.pickadate('picker'); picker.on('open', function() { $(document).off('.' + picker.get('id')) });

 .picker__holder { width: 350px !important; }

 <link href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css" rel="stylesheet" /> <link href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script> <input id="input_01" class="datepicker" name="date" type="text" autofocus value="14 August, 2014" data-value="2014-08-08">

Example with materialize 1.0.0

 //added autoClose:true to close the modal when a date is picked var input = $('.datepicker').datepicker({autoClose: true}); //and changed the dismissible property of the datepicker modal input[0].M_Datepicker.modal.options.dismissible = false;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" /> <input id="input_01" class="datepicker" name="date" type="text" autofocus value="14 August, 2014" data-value="2014-08-08">