如何添加Materialize日期选择器？前端新手求助

Hey there! Let's get that date picker working for you. I looked over your code and found a few straightforward issues that are blocking it from functioning correctly:

Key Problems in Your Code #

• jQuery is loaded after Materialize JS: Materialize's JavaScript relies on jQuery to work, so you need to load jQuery first. Your current setup loads Materialize before jQuery, which breaks the dependency.
• Undefined options variable: In your native JS initialization, you're passing options as a parameter, but this variable isn't defined anywhere. Even if you don't need custom settings, you should pass an empty object {} here.
• Duplicate initialization: You're using both native DOMContentLoaded and jQuery ready to initialize the date picker. This can cause conflicts—stick to one method for consistency.

Corrected Code #

Here's the fixed version of your code, using the jQuery approach (it's simpler for most cases):

<html> 
<head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
</head> 
<body> 
    <input type="text" class="datepicker"> 

    <!--Load jQuery FIRST, then Materialize JS-->
    <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

    <script>
        // Single initialization with jQuery
        $(document).ready(function(){
            // If you want custom settings, add them inside the {}
            // Example: $('.datepicker').datepicker({ format: 'yyyy-mm-dd' });
            $('.datepicker').datepicker();
        });
    </script> 
</body> 
</html>

If you prefer using native JavaScript instead, here's that version:

<html> 
<head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
</head> 
<body> 
    <input type="text" class="datepicker"> 

    <!--Load jQuery FIRST, then Materialize JS-->
    <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.datepicker');
            // Define options (empty object for default settings)
            var options = {};
            var instances = M.Datepicker.init(elems, options);
        });
    </script> 
</body> 
</html>

Quick Notes #

• If you want to customize the date picker (like changing the date format, setting a minimum date, etc.), just add those properties to the options object. For example:

  // jQuery example with custom format
  $('.datepicker').datepicker({ 
      format: 'dd/mm/yyyy',
      minDate: new Date() // Disable past dates
  });
  

内容的提问来源于stack exchange，提问作者Faizal Hussain