Litepicker 开源日期范围选择器使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00071/article/details/137625308

Litepicker 开源日期范围选择器使用教程

Litepicker Date range picker - lightweight, no dependencies 项目地址: https://gitcode.com/gh_mirrors/li/Litepicker

1. 项目介绍

Litepicker 是一个轻量级的开源日期范围选择器，无依赖项，高度可配置，支持多种插件扩展。它适用于需要日期选择功能的网页应用，提供了丰富的功能和灵活的配置选项。

主要特性

无依赖项：Litepicker 不依赖于任何第三方库，保持轻量级。
单日期或日期范围选择：支持单日期和日期范围的选择。
多个月份显示：可以同时显示多个月份。
最小/最大天数和日期限制：支持设置选择的最小/最大天数和日期。
键盘导航：通过插件支持键盘导航。
移动友好：通过插件支持移动设备上的友好操作。
预定义范围：通过插件支持预定义日期范围。
多选：通过插件支持多日期选择。

2. 项目快速启动

安装

使用 npm 安装

npm install litepicker

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

使用示例

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Litepicker 示例</title>
</head>
<body>
    <input type="text" id="litepicker">

    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script>
        const picker = new Litepicker({
            element: document.getElementById('litepicker'),
            singleMode: true, // 单日期模式
            format: 'YYYY-MM-DD' // 日期格式
        });
    </script>
</body>
</html>

使用插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Litepicker 插件示例</title>
</head>
<body>
    <input type="text" id="litepicker">

    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/mobilefriendly.js"></script>
    <script>
        const picker = new Litepicker({
            element: document.getElementById('litepicker'),
            singleMode: false, // 日期范围模式
            format: 'YYYY-MM-DD',
            plugins: ['mobilefriendly'] // 启用移动友好插件
        });
    </script>
</body>
</html>