Materialize datepicker SelectOnClose not working

16,056

Solution 1

Please add below few lines to your code..

onSet: function (ele) {
   if(ele.select){
          this.close();
   }
}

Solution 2

var datePicker = $('.datepicker').pickadate({
    onSet: function () {
        this.close();
    }
});

Solution 3

The developer of materialize thought that it would match Google's date picker if it doesn't close on select according to this issue:

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

However you can change the source code of materialize if you don't mind, like this:

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

Solution 4

Better Solution: Use if ( 'select' in arg ) condition so that the datepicker dialog wont hide when you select month or year.

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

Solution 5

i had the same problem and i solved it this way:

 $('.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 a date is set) ensures the date,month and year are entered and closes only if the date is set.

The onOpen: function(called when the datepicker opens) clears the input when datepicker is opened again, useful in case when the user inputs the wrong date.. Without using this function , the datepicker cant navigate though different months,years without closing..

Hope this solves your problem.

View more solutions

16,056

Author by

Admin

Updated on July 19, 2022

Comments

Admin almost 2 years

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

That's not working in my page. I'm using the latest Chrome browser on Windows. I've tried IE browser, but there's the whole datepicker not showing...

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

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 anyone help me to fix these datepickers?

jalagrange over 8 years

The problem with this solution is that it executes and closes as soon as I click anywhere on the date picker, not just when i choose a date but when i change month or year as well.
jalagrange over 8 years

The problem with this solution is that it executes and closes as soon as I click anywhere on the date picker, not just when i choose a date but when i change month or year as well
Toby Speight over 7 years

Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply.
Shane Reustle almost 6 years

I wonder why the closeOnSelect option no longer functions properly? It's still documented.