-2

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.

Daemon Beast
  • 2,794
  • 3
  • 12
  • 29
Avtar Sodhi
  • 1
  • 2
  • Please include what you have already tried and provide a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Daemon Beast Feb 08 '20 at 08:21
  • 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 click the header of the modal but if we are not initializing the date picker then it closes the date picker on click the modal's header. – Avtar Sodhi Feb 08 '20 at 09:20
  • Please edit that into the question next time. – Daemon Beast Feb 08 '20 at 10:32

1 Answers1

0

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">
CronosS
  • 3,129
  • 3
  • 21
  • 28
  • hello @cronosS, how can we do it with materialize upgrade version? – Avtar Sodhi Aug 20 '20 at 10:43
  • @AvtarSodhi I've added an example using materialize in the answer. – CronosS Aug 21 '20 at 12:17
  • hey @CronosS, thankyou for your comment. I am using upgraded materialize datepicker in a modal. but when i dismiss the modal then i am also destroying the datepicker instance but after destroying the scrolling of that particular page is disabled. please help me for this. – Avtar Sodhi Aug 23 '20 at 13:57