Materializecss datepicker not working

13,731

Solution 1

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

Solution 2

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

Solution 3

        <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,
});

13,731

Author by

Sibin Francis

Specialized in Web Development, with more than 5 years of expertise writing, refactoring and customizing web applications. Interested in new technologies, design patterns and applying best practices to solve customer-focused and real-world engineering problems. Works on analysis, design, and implementation of complex web systems using Agile Software Development Methodologies, writing code, unit tests, and developing specs with the use of TDD, Object Oriented Programming, Aspect Oriented Programming, and others programming paradigms. Preferred technologies: - ECMAScript6+, JavaScript, NodeJS, HTML5 and CSS3 - JavaScript frameworks: Angular 6+ with TypeScript, MEAN - Libraries like: Underscore, LoDash, etc - RESTfull APIs development with NodeJS ExpressJS, MongooseJS, etc - SQL: MySQL, NoSQL: MongoDB Also has experience working with PHP language. PHP Frameworks: Laravel5 with ORM Eloquent and CakePHP with ActiveRecord and Datamapper patterns. Template engines: Blade, Jade. RESTfull APIs in PHP with Laravel 5 and Lumen. Managing Services on Linux servers e.g.Apache2, PHP5.x, MySQL5.x, MongoDB. Control version: GIT Favorite editor: Visual Studio Code, Sublime,PhpStrome OS: Linux/Ubuntu, Windows 7/8

Updated on June 08, 2022

Comments

Sibin Francis almost 2 years
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?