xdan/datetimepicker 插件使用详解：打造强大的日期时间选择器

鲍诚寒Yolanda

于 2025-06-11 09:13:08 发布

阅读量273

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01016/article/details/148577259

xdan/datetimepicker 插件使用详解：打造强大的日期时间选择器

datetimepicker jQuery Plugin Date and Time Picker 项目地址: https://gitcode.com/gh_mirrors/da/datetimepicker

一、插件简介

xdan/datetimepicker 是一款基于 jQuery 的轻量级日期时间选择器插件，它提供了丰富的功能和灵活的配置选项，能够满足各种日期时间选择需求。该插件支持以下核心功能：

日期和时间选择（可单独使用）
国际化多语言支持
内联模式显示
自定义日期时间格式
日期范围限制
主题定制
响应式设计

二、快速入门

1. 基本引入

首先需要在页面中引入必要的 CSS 和 JavaScript 文件：

<!-- 在 body 标签结束前引入 -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<script src="jquery.js"></script>
<script src="build/jquery.datetimepicker.full.min.js"></script>

2. 基本使用示例

最简单的初始化方式：

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

jQuery('#datetimepicker').datetimepicker();

三、核心功能详解

1. 单独使用时间选择器

如果只需要时间选择功能，可以禁用日期选择器：

jQuery('#timepicker').datetimepicker({
  datepicker: false,
  format: 'H:i',  // 24小时制
  value: '12:00'  // 默认值
});

2. 单独使用日期选择器

类似地，也可以只使用日期选择功能：

jQuery('#datepicker').datetimepicker({
  timepicker: false,
  format: 'd/m/Y'  // 日/月/年格式
});

3. 内联模式

内联模式可以让日期选择器直接显示在页面上，而不需要点击输入框：

jQuery('#inlinepicker').datetimepicker({
  inline: true,
  weeks: true  // 显示周数
});

4. 主题设置

插件支持暗色主题：

jQuery('#darkpicker').datetimepicker({
  inline: true,
  theme: 'dark'
});

四、高级功能

1. 国际化支持

插件内置多语言支持，可以轻松切换语言：

jQuery.datetimepicker.setLocale('de');  // 设置为德语

jQuery('#i18npicker').datetimepicker({
  i18n: {
    de: {
      months: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
      dayOfWeek: ["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa."]
    }
  },
  timepicker: false,
  format: 'd.m.Y'
});

2. 日期范围限制

可以设置最小和最大可选日期：

jQuery('#rangepicker').datetimepicker({
  timepicker: false,
  formatDate: 'Y/m/d',
  minDate: '-1970/01/02',  // 昨天是最小日期
  maxDate: '+1970/01/02'   // 明天是最大日期
});

3. 动态选项设置

可以根据条件动态修改选项：

var logic = function(currentDateTime) {
  if(currentDateTime.getDay() == 6) {  // 如果是周六
    this.setOptions({
      minTime: '11:00'
    });
  } else {
    this.setOptions({
      minTime: '8:00'
    });
  }
};

jQuery('#dynamicpicker').datetimepicker({
  onChangeDateTime: logic,
  onShow: logic
});

4. 使用 Moment.js 格式化

插件支持与 Moment.js 集成：

// 设置 Moment.js 格式化器
$.datetimepicker.setDateFormatter('moment');

// 使用 Moment.js 格式
jQuery('#momentpicker').datetimepicker({
  format: 'DD.MM.YYYY h:mm a',
  formatTime: 'h:mm a',
  formatDate: 'DD.MM.YYYY'
});

五、实用技巧

1. 禁用周末

jQuery('#weekendpicker').datetimepicker({
  onGenerate: function(ct) {
    jQuery(this).find('.xdsoft_date.xdsoft_weekend')
      .addClass('xdsoft_disabled');
  },
  timepicker: false
});

2. 日期范围联动

实现开始日期和结束日期的联动选择：

jQuery(function() {
  jQuery('#start_date').datetimepicker({
    format: 'Y/m/d',
    onShow: function(ct) {
      this.setOptions({
        maxDate: jQuery('#end_date').val() || false
      });
    },
    timepicker: false
  });
  
  jQuery('#end_date').datetimepicker({
    format: 'Y/m/d',
    onShow: function(ct) {
      this.setOptions({
        minDate: jQuery('#start_date').val() || false
      });
    },
    timepicker: false
  });
});

3. 输入掩码

为输入框添加掩码，引导用户正确输入：

jQuery('#maskpicker').datetimepicker({
  mask: '9999/19/39 29:59'  // 数字表示该位置允许的最大值
});

六、完整配置选项

| 选项名 | 默认值 | 描述 | 示例 | |--------|--------|------|------| | lazyInit | false | 延迟初始化，只在用户交互时初始化插件 | | | value | null | 设置初始值，会覆盖输入框的值 | {value:'12.03.2013', format:'d.m.Y'} | | lang | 'en' | 设置语言 | {lang:'de'} | | format | 'Y/m/d H:i' | 日期时间格式 | {format:'d.m.Y H:i'} | | timepicker | true | 是否显示时间选择器 | {timepicker:false} | | datepicker | true | 是否显示日期选择器 | {datepicker:false} | | weeks | false | 是否显示周数 | {weeks:true} | | mask | false | 是否使用输入掩码 | {mask:'9999/19/39'} | | allowTimes | [] | 允许选择的时间列表 | {allowTimes:['12:00','13:00','15:00']} |