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));
                    }
                });
            });

效果图如下

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

猜你喜欢