两种时间选择器（移动端和PC端）

最新推荐文章于 2025-06-15 09:21:15 发布

原创最新推荐文章于 2025-06-15 09:21:15 发布 · 1.5w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#datepicker #前端时间选择器

web前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一款移动端时间选择器，以年月为例，并提供了实现代码。此外还介绍了适用于PC端的bootstrap时间选择器datetimepicker的使用方法。

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

1、移动端时间选择器，以年月为例
这里写图片描述
此款时间选择器需要引入两个js文件，jquery.js和query.date.js下载地址在本文最后，代码如下：

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="jquery.date.js"></script>

<input type="text" id="date" data-options="{'type':'YYYY-MM','beginYear':2010,'endYear':2088}" style="width:166px;height:19px;">

<script>
    $.date('#date');
</script>

2、PC端时间选择器
这里写图片描述
此处使用的是bootstrap的时间选择器datetimepicker，故要引入的文件有bootstrap.css，datetimepicker.css，jquery.js，bootstrap-datetimepicker.js和bootstrap-datetimepicker.zh-CN.js

<div class="input-group date form_month" style="width: 100%;" data-date="2015-01" data-link-field="birthday" data-link-format="yyyy-mm">
    <span class="input-group-addon input-item span-label">生日：<span class="glyphicon glyphicon-time" style="visibility: hidden;"></span></span>
    <input class="form-control input-item" type="text" value="" readonly>
</div>
<input type="hidden" id="birthday" value=""/>
<script>
    // 日期控件初始化
    $('.form_month').datetimepicker({
        format: 'yyyy-mm',
        weekStart: 1,
        autoclose: true,
        startView: 3,
        minView: 3,
        forceParse: false,
        language: 'zh-CN',
        endDate: new Date()
    });
</script>