CODEWITHSUNDEEP
datepickermaterial-designmaterialize
Sibin Francis
Sibin Francis

Reputation: 601

Materializecss datepicker not working

I am using materializecss for the first time in my web application and I am struggling with datepicker. It is not working at all.

I imported materialize.css and js file and use the code

<div>
 <input type="date"  class="datepicker" />
</div>

and added script code

 $(document).ready(function() {
    $('select').material_select();


    window.picker = $('.datepicker').pickadate({

        selectYears: 16, // Creates a dropdown of 15 years to control year
        format: 'yyyy-mm-dd'
    });



});

but nothing worked, it shows a disabled text box.

Also I want to know how to add timepicker in materializecss?

Upvotes: 5

Views: 14712

Answers (3)

Dio Lantief Widoyoko
Dio Lantief Widoyoko

Reputation: 161

First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.

check my code in init.js for initialization, CSS and JS Materialize via cdn 

$(document).ready(function() {
    
    $('.modal').modal();
    //this are my init
    $('#dtp').datepicker();
    $('#dtp').setDate(new Date());
});
<html>
  <head>
    <!-- this is my CSS via cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <div class="row">
      <form class="col s12 m6 card">
        <div class="row center">
          <h4>Materialize DateTime Picker</h4>
          <div class="input-field col s12 m12">
            <input id="dtp" type="text" class="datepicker">
            <label for="dtp">Birthday</label>
          </div>
        </div>
      </form>
    </div>
    
    <!-- this is my JS via cdn -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

Check the documentation from Materialize website, it is always helpful for programmers like me. Hope this answer help you

Try to run my Code Snippet

Upvotes: 6

max son
max son

Reputation: 21

        <div class="row">
          <div class="input-field col s12">
            <input id="idate" type="text"  name="idate" class="datepicker" >
            <label for="idate">Issue Date</label>
          </div>
        </div>


$('.datepicker').pickadate({
  selectMonths: true,// Creates a dropdown to control month
  selectYears: 15 // Creates a dropdown of 15 years to control year,
});

Upvotes: 2

Thomas
Thomas

Reputation: 91

I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.

cheers Thomas

Upvotes: 9

Related Questions