javascript适合移动端的日期时间拾取器

下面我将介绍如何用JavaScript编写一个适合移动端使用的日期时间拾取器。

1. 引入第三方库

使用现成的第三方库可以大大减少我们的开发时间。推荐使用Mobiscroll库，它提供了丰富的移动端UI组件，包括日期时间选择器。

可以在头部引入Mobiscroll的CSS和JavaScript文件：

<link rel="stylesheet" href="https://cdn.mobiscroll.com/4-9-7/css/mobiscroll.jquery.min.css">
<script src="https://cdn.mobiscroll.com/4-9-7/js/mobiscroll.jquery.min.js"></script>

2. 创建日期时间选择器

在HTML中创建一个input标签，并指定类型为date或者datetime-local：

<input type="date" id="datePicker">
<input type="datetime-local" id="dateTimePicker">

接下来，使用JavaScript初始化日期时间选择器：

var datePicker = mobiscroll.date('#datePicker');
var dateTimePicker = mobiscroll.datetime('#dateTimePicker');

这样就可以在移动端页面中看到一个美观的日期时间选择器了。

示例1：事件绑定

我们可以为日期时间选择器绑定change事件，以便在用户选择日期时间后，我们可以获取用户选择的值：

datePicker.on('change', function (event, inst) {
  var value = event.value;
  console.log('日期选择器选中值: ' + value);
});

dateTimePicker.on('change', function (event, inst) {
  var value = event.value;
  console.log('日期时间选择器选中值: ' + value);
});

示例2：设置选项

我们还可以通过传递一些选项来定制日期时间选择器的行为。例如，我们可以设置选择器的语言为中文，显示中文的月份名称：

mobiscroll.settings = {
  lang: 'zh',
  dateFormat: 'yyyy-mm-dd'
};

var datePicker = mobiscroll.date('#datePicker');
var dateTimePicker = mobiscroll.datetime('#dateTimePicker');

更多选项可以到Mobiscroll官方文档查看。

希望我的回答能够对你有所帮助。