jQuery datetimepicker 格式 - Javascript

jQuery datetimepicker 是一个基于 jQuery 的日期时间选择器插件，可以轻松地将日期和时间选择器添加到任何网页上。它的使用非常灵活，可以根据自己的需求自定义样式和格式。

安装

<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入 datetimepicker 样式文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet">

<!-- 引入 datetimepicker JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

基本用法

<input type="text" id="datetimepicker">

<script>
  $(function() {
    $('#datetimepicker').datetimepicker();
  });
</script>

自定义选项

可以使用各种选项自定义 datetimepicker 的外观和行为。

<input type="text" id="datetimepicker">

<script>
  $(function() {
    $('#datetimepicker').datetimepicker({
      format: 'Y/m/d H:i', // 设置日期时间格式
      defaultTime: '12:00', // 设置默认时间
      allowBlank: true, // 允许为空
      minDate: '-1970/01/01', // 可选最小日期
      maxDate: '+1970/01/02', // 可选最大日期
      step: 30, // 时间步长为 30 分钟
    });
  });
</script>

事件

datetimepicker 提供了一些事件可以用于处理用户与选择器的交互。

<input type="text" id="datetimepicker">
<p id="result"></p>

<script>
  $(function() {
    $('#datetimepicker').datetimepicker({
      onChangeDateTime: function(dp, $input) { // 当日期时间选择器的值更改时触发
        $('#result').text('Selected date: ' + dp.dateFormat('Y/m/d H:i'));
      },
      onClose: function(current_time, $input) { // 当日期时间选择器被关闭时触发
        alert('Selected time: ' + current_time);
      }
    });
  });
</script>

总结

jQuery datetimepicker 是一个非常有用的插件，它可以帮助你为你的网页添加一个美观的日期时间选择器。它非常易于使用，而且提供了许多自定义选项和事件供你使用。