Air-Datepicker 项目在无NPM环境下的使用指南

2025-06-29 09:36:03作者：裘旻烁

背景介绍

Air-Datepicker 是一个轻量级的日期选择器库，在Web开发中广泛使用。虽然官方推荐通过NPM安装，但在某些特殊环境下（如共享主机服务器），开发者可能无法使用NPM进行安装。本文将详细介绍如何在无NPM环境下使用Air-Datepicker。

直接使用CDN资源

最简便的方式是通过CDN引入Air-Datepicker资源：

<link rel="stylesheet" href="CDN路径/air-datepicker.css">
<script src="CDN路径/air-datepicker.js"></script>

这种方式无需任何构建工具或包管理器，只需在HTML文件中直接引用即可。

语言本地化设置

Air-Datepicker默认显示俄语界面，在无NPM环境下设置英语界面有以下两种方法：

方法一：直接定义locale对象

const localeObj = {
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
    dateFormat: 'mm/dd/yyyy',
    timeFormat: 'hh:ii aa',
    firstDay: 0
};

const datepicker = new AirDatepicker('#element', {
    locale: localeObj
});

方法二：利用CDN加载语言文件

<script>
    var exports = { default: {} }
</script>
<script src="CDN路径/air-datepicker.js"></script>
<script src="CDN路径/locale/en.js"></script>
<script>
    new exports.AirDatepicker('#element', {
        locale: exports.default
    })
</script>

这种方法通过模拟CommonJS的exports对象来加载语言文件，虽然略显复杂，但可以避免手动定义locale对象。

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Air-Datepicker示例</title>
    <link rel="stylesheet" href="CDN路径/air-datepicker.css">
</head>
<body>
    <input id="datepicker" type="text">
    
    <script>
        var exports = { default: {} }
    </script>
    <script src="CDN路径/air-datepicker.js"></script>
    <script src="CDN路径/locale/en.js"></script>
    <script>
        new exports.AirDatepicker('#datepicker', {
            locale: exports.default,
            // 其他配置项
        });
    </script>
</body>
</html>