时间控件插件[js/jquery]总结和简单实践-前端_js日期组件前端给后端是什么样子的-优快云博客

本文链接：https://blog.youkuaiyun.com/future_todo/article/details/52683951

本文介绍了一款轻量级日期选择器Pikaday的使用方法，该插件不依赖任何JavaScript库，体积小巧。文章通过示例展示了如何设置日期范围、默认星期等配置，并验证所选日期的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.控件收集

比较常用的是功能丰富的My97DatePicker，缺点是界面效果一般。
jquery时间插件
目前插件有很多种类，有的支持两个日期栏，有的带农历，带节假日,带时间,带钟表显示,html5响应式时间轴页面。
比较小的一个日期选择器Pickday,不依赖任何javascript库，并且文件只有5K(目前加了一些扩展，达到11K左右)，有人已经修改成中文版的Pikaday中文版(如果地址不能访问，可以用goolge搜索)，我们下面实践的就是这个插件。

2.实践

<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>picker时间控件</title>
<link rel="stylesheet" type="text/css" href="css/pikaday.css"/>
<script type="text/javascript" src="js/pikaday.min.js"></script>
</head>
<body>
<input type="text" id="datepicker1" />
<input type="text" id="datepicker2" />

<script type="text/javascript">

    var picker1 = new Pikaday(
    {
        field: document.getElementById('datepicker1'),
        firstDay: 1,
        minDate: new Date('2010-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000,2020]
    });
     var picker2 = new Pikaday(
    {
        field: document.getElementById('datepicker2'),
        firstDay: 1,
        minDate: new Date('2010-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000,2020]
    });

    var date1 = document.getElementById('datepicker1').val();
    var date2 = document.getElementById('datepicker2').val();
    if(date1>date2){
        alert('截至时间应该大于开始时间');
        return;
    }
</script>
</body>
</html>