Material Design 是谷歌推出的一种设计语言，旨在提高 Web 应用程序的用户体验和整体外观。它是一种功能齐全、灵活的设计语言，提供了一种美观、直观和易于使用的 Web 应用体验。
时间选择器是 Material Design 应用程序中的重要组件之一。在本文中，我们将讨论如何在 Material Design 应用程序中使用时间选择器。
时间选择器的基本知识
时间选择器是一种交互式工具，用于选择日期和时间。时间选择器通常包括指定日期和时间的控件，以及管理器来帮助用户导航和选择正确的日期和时间。
时间选择器可以以多种方式显示。常见的一种方式是将其嵌入到页面中，以便用户可以在页面上选择日期或时间。另一种方式是在用户需要选择日期或时间时打开一个弹出窗口或对话框，以便用户可以进行选择。
Material Design 时间选择器的特点
Material Design 时间选择器是一个易于使用且具有吸引力的组件，可以轻松地集成到您的应用程序中。它有以下特点：
- 响应式设计：可以在各种设备上使用，包括桌面和移动设备。
- 具有可访问性：提供了对屏幕阅读器和键盘用户的支持。
- 引人注目：具有动画和特效来增强用户体验。
- 灵活：可以配置时间选择器的样式和行为以满足特定的需要。
如何在 Material Design 应用程序中实现时间选择器？
使用 Material Design Lite
Material Design Lite（MDL）是一个基于 Material Design 设计语言的轻量级、可重用性 Web 框架。它通过 HTML、CSS 和 JavaScript 提供了一个灵活、友好且丰富的用户界面工具库。
时间选择器是 MDL 中的一个模块，可以轻松地添加到您的 Web 应用程序中。在您的 HTML 文件中添加以下代码：
// www.javascriptcn.com code example
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- 在 input 元素中添加的类 mdl-textfield 和 mdl-js-textfield 以及在 span 元素中的类 mdl-textfield__label 都是 MDL 的模块名称。-->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="datetime">
<label class="mdl-textfield__label" for="datetime">Select a Date and Time</label>
</div>
<!-- Dialog structure -->
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Pick a Date</h4>
<div class="mdl-dialog__content">
<div id="demo-picker" class="pmd-datepicker"></div>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="dialog-button">OK</button>
<button type="button" class="mdl-button close" id="close-button">Cancel</button>
</div>
</dialog>上面的代码添加了一个时间选择器和对话框，让用户选择日期和时间。对话框是当用户点击 input 元素时弹出的。
通过 JavaScript 代码进行初始化：
// www.javascriptcn.com code example
<script type="text/javascript">
document.querySelector('#datetime').addEventListener('click', function() {
var dialog = document.querySelector('dialog');
var showModalButton = document.querySelector('#dialog-button');
var datePicker = new MaterialDatetimePicker({})
datePicker.open();
datePicker.close(function(date) {
var output = moment(date).format('Do MMMM YYYY, h:mm:ss a');
document.querySelector('#datetime').value = output;
dialog.close();
});
dialog.showModal();
});
document.querySelector('#close-button').addEventListener('click', function() {
var dialog = document.querySelector('dialog');
dialog.close();
});
</script>这段代码使时间选择器弹出，当用户选择日期和时间后，它将被关闭并显示所选日期和时间。
使用 Bootstrap
Bootstrap 是一个流行、功能齐全且易于使用的 HTML、CSS 和 JavaScript 框架，可用于快速开发响应式 Web 应用程序和网站。
时间选择器是 Bootstrap 中的一个组件，可以用于创建用户友好的日期和时间输入界面。在您的 HTML 文件中添加以下代码就可以使用：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap DateTimePicker Example</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap DateTimePicker Example</h3>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
</body>
</html>这段代码创建了一个具有日期选择器的输入框。当用户单击输入框时，会弹出一个可供选择日期和时间的日期选择器。
结语
本文介绍了 Material Design 应用中使用时间选择器的方法，以及如何使用 Material Design Lite 和 Bootstrap 框架来实现时间选择器。通过使用这些框架，您可以轻松地为自己的应用程序添加时间选择器，以提高用户体验和交互性。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d79e88a941bf7134da4f70