Bootstrap.Popover+JQ.fullYearPicker 全年展开的日期控件

前言:居于Bootstrap.Popover和fullYearPicker自定义日期控件,全年12个月日期展开,带有第几周,有年份切换功能,点击具体日期返回当前日期。


主要用到bootstrap的popover和jq的fullYearPicker。

popover是用来弹出控件的,主要实现还是靠fullYearPicker。

因为fullYearPicker是没有带有第几周的,所以我扩展了一下,在每一行的前面加上当前周属于一年中的第几周。

有需要可以到我的资源里面下载,控件js+css都在里面,点击下载fullYearPicker

如果不需要,直接搜fullYearPicker,下载就好了。


文本框加popover,弹出控件。

<input type="text" id="boxDate" class="form-control pull-right" placeholder="mm/dd/yyyy" data-toggle="popover" data-container="body" title="Select date" data-content="<div id='divFullYearPicker'></div>">

popover打开事件配置fullYearPicker 控件。


            $('#boxDate').popover({
                html: true
            });

            $('#boxDate').on('shown.bs.popover', function (obj) {
                $('#divFullYearPicker').fullYearPicker({
                    disable: false,//只读
                    year: (new Date().getFullYear()),//指定年份
                    initDate: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()],//初始化选中日期
                    yearScale: { min: 1949, max: 2100 },//初始化日历范围
                    format: "YYYY-MM-DD",//日期格式化  YYYY-MM-DD  YYYY-M-D
                    cellClick: function (dateStr, isDisabled) {//当前选中日期回调函数
                        var curDate = new Date(dateStr);
                        $('#boxDateOfManuf').val((curDate.getMonth() + 1) + '/' + curDate.getDate() + '/' + curDate.getFullYear());
                        $('#boxDateOfManuf').popover('hide');
                    },
                    choose: function (a) {//实时获取所有选中的日期的回调函数(推荐使用)
                        $("#a").text(JSON.stringify(a));
                    }
                });
            });

 效果图如下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郑小晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值