XnDatePicker日期选择器插件

XnDatePicker 是一个支持移动端和 PC 端的漂亮、强大的日期时间选择器。它提供了丰富的功能，包括日、周、周次、月、年、区间等多种类型的时间选择，并且支持时间类型，如 datepicker、datetimepicker、daterangepicker 等。该项目持续更新，旨在满足各种日期时间选择的需求。

多平台支持：支持移动端和 PC 端。

多种选择类型：支持日、周、周次、月、年、区间等多种类型。

时间类型支持：支持 datepicker、datetimepicker、daterangepicker 等。

持续更新：项目持续更新，不断增加新功能和修复 bug。

1.首先，从 GitHub 仓库下载 XnDatePicker 的代码：

git clone https://github.com/fanaiai/xndatepicker.git

2、引用 JS 文件

在你的 HTML 文件中引用 XnDatePicker 的 JS 文件：

<script type="text/javascript" src="/dist/xndatepicker.min.js"></script>

3、初始化选择器

使用以下代码初始化日期选择器：

var xndatepicker = new XNDatepicker(
    $("#date"), // 日历容器，可以是 input 或其他标签
    {
        isMobile: true, // 是否是移动端
        type: 'daterange', // 日历类型，如 date, datetime, daterange 等
        showWeek: true, // 是否显示周几
        linkPanels: false, // 双日历面板联动
        firstDayOfWeek: 7, // 周起始日 1-7
        disableDate: function(date, dayjs, calcType) {
            // 日期过滤逻辑
            if (dayjs(date).format('YYYY') == '2019') return true;
            if (calcType == 'month' && dayjs(date).format('MM') == '09') return true;
            return false;
        },
        scrolllist: ['hour', 'minute', 'second'], // 滚动条的显示设置
        placeholder: { startTime: '请选择', endTime: '请选择结束时间' },
        locale: {
            month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            week: ['日', '一', '二', '三', '四', '五', '六'],
            clear: '清空',
            cancel: '取消',
            confirm: '确定',
            yearHeadSuffix: function(year) { return year + '年'; },
            weekNum: function(weeknum) { return '第' + weeknum + '周'; }
        },
        theme: 'default', // 主题
        multipleDates: [], // 多选日期类型时的初始值
        startTime: '', // 初始开始时间
        endTime: '' // 初始结束时间
    },
    function(data) {
        // 选择日期后的回调函数
        console.log(data);
    }
);

4.方法

日期格式化 xndatepicker.format(date,formatString)

销毁实例 xndatepicker.destroy()

更新日期 xndatepicker.resetDate(startTime,endTime)