javascript - 如何添加物化日期选择器
问题描述
我是前端开发的新手,我正在尝试添加一个日期选择器(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>
解决方案
使用文档说明:
// 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>
笔记
我只是建议你先导入jquery
你的 HTML然后 materiliaze.js
如上所示
推荐阅读
- azure - Azure CosmosDB 如何将 CreateItem 费用降至 5 RU?
- javascript - 是否可以获取触发了哪个自定义函数的元素 ID?
- html - 使用悬停伪元素不起作用
- python-3.x - Matplotlib:如何获得彼此重叠而不是并排的颜色条?
- node.js - node js和mongodb无法连接docker-compose
- javascript - 错误:元素类型无效:应为字符串(用于内置组件)或类/函数..检查渲染方法
- python - 如何在 AirTest IDE 的 HTML 报告中获取失败状态?
- c# - SQL Server 2017 上的 CLR Strict Security - 程序集已签名,但突然再次出现“clr strict security”异常
- excel - 成对比较 Excel/Google 表格的多列
- laravel - Laravel,找不到属性