如何添加物化日期選擇器

Question

我是前端開發的新手，我正在嘗試添加一個日期選擇器（ Materialize 框架）。 我花了很多時間在互聯網上搜索

“如何添加具體化日期選擇器”。

但是我找不到解決我的問題的方法。

<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">
  <!--JavaScript at end of body for optimized loading-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  <script
 src="http://code.jquery.com/jquery-3.3.1.js"
 integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 crossorigin="anonymous"></script>
 <script>
  document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, options);
 });

 // Or with jQuery

  $(document).ready(function(){
   $('.datepicker').datepicker();
  });
 </script>
   </body>
 </html>

Answer 1

使用文檔說明：

 // Using with jQuery $(document).ready(function(){ $('.datepicker').datepicker(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> =<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <body> <input type="text" class="datepicker"> </body>

筆記

我只是建議您首先在 HTML 中導入jquery ，然后如上所示導入materiliaze.js

Answer 2

使用這個主題作為你的基本主題，大部分組件都帶有實體化觸摸。 https://materializecss.com/pickers.html

檢查他們的演示。

Answer 3

這是你的問題。

<input type="text" class="datepicker">

將輸入類型更改為“日期”。

如何添加物化日期選擇器

問題描述

3 個解決方案

解決方案1
2 已采納 2018-05-21 06:45:53

筆記

解決方案2
0 2018-05-21 06:45:42

解決方案3
0 2020-07-07 09:43:16

如何添加物化日期選擇器

問題描述

3 個解決方案

解決方案1 2 已采納 2018-05-21 06:45:53

筆記

解決方案2 0 2018-05-21 06:45:42

解決方案3 0 2020-07-07 09:43:16

解決方案1
2 已采納 2018-05-21 06:45:53

解決方案2
0 2018-05-21 06:45:42

解決方案3
0 2020-07-07 09:43:16