两种时间选择器(移动端和PC端)

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>

代码下载地址: https://github.com/wwjhzc/datepicker
作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值