Geek Answers Handbook

Materialize datepicker SelectOnClose not working

I am trying to create a datepicker with Materialize. According to the documentation, the datepicker should close when the user selects a date.

This does not work on my page. I am using the latest Chrome browser on Windows. I tried the IE browser, but there the whole datapicker did not show ...

Click here for my page (input 3 and 4 are finalists)

My javascript:

$('#due_date').pickadate({ monthsFull: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ], monthsShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ], weekdaysFull: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ], weekdaysShort: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ], today: 'vandaag', clear: 'verwijderen', close: 'sluiten', firstDay: 1, format: 'dd-mm-yyyy', formatSubmit: 'yyyy/mm/dd', closeOnSelect: true, selectMonths: true, // Creates a dropdown to control month selectYears: 3, // Creates a dropdown of 15 years to control year min: new Date() });

Can someone help me fix these date pickers?

+7
cross-browser datepicker materialize
source share
7 answers

Add a few lines to your code.

 onSet: function (ele) { if(ele.select){ this.close(); } }
+18
source share
 var datePicker = $('.datepicker').pickadate({ onSet: function () { this.close(); } });
+3
source share

The developer materializes the idea that it will correspond to the Google date choice, if it does not close by choice in accordance with this problem:

https://github.com/Dogfalo/materialize/issues/870

However, you can change the source code of the materialization if you don't mind, for example:

https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833

+2
source share

Best solution: use the if ( 'select' in arg ) condition so that the date picker dialog does not hide when you select the month or year.

 $('.datepicker').pickadate({ onSet: function( arg ){ if ( 'select' in arg ){ //prevent closing on selecting month/year this.close(); } } });
+2
source share

I had the same problem and solved it as follows:

  $('.datepicker1').pickadate({ selectMonths: true, // Creates a dropdown to control month selectYears: 15, // Creates a dropdown of 15 years to control year min: true, onOpen: function () { this.clear(); }, onSet: function () { var x,y,year,date,month; x = $('.datepicker1').pickadate().val().toString(); y = x.split(/[ ,]+/); date = y[0]; month = y[1]; year = y[2]; console.log(y[0]+" "+ y[1]+ " "+ y[2]); if(date && month && year){ this.close(); } } }); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Materialize Datepicker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> </head> <body> <form class="col s6"> <label for="To" >To : </label> <input type="date" id="To" class="datepicker1"> </form> <script src="site.js"></script> </body> </html>

The onSet: function (called when the date is set) ensures that the date, month, and year will be entered and closed only if the date is set.

The onOpen function: (called the datepicker when opening it) clears the input when the datepicker opens again, useful when the user enters an incorrect date. Without using this function, the datepicker adapter cannot go through different months, years without closing ..

Hope this solves your problem.

+1
source share

If "closeOnSelect: true" does not work, you can trigger the close button click event

HTML code for input element:

 <input type='text' id='purchase_date'/>

Js code for the item:

 jQuery(document).ready(function(){ $('#purchase_date').pickadate({format: 'yyyy-mm-dd'}) .on('change', function(){ $(this).next().find('.picker__close').click(); }); });

Hope this solves your problem.

0
source share

Tested on materializecss 1.0.0: use onSelect callback

 $('.datepicker').datepicker({ autoClose: true, today: 'Today', clear: 'Clear', close: 'Close', format: 'dd/mm/yyyy', //perform click event on done button onSelect: function () { $('.confirmation-btns .datepicker-done').click(); } });
0
source share

More articles:


All Articles