时间选择控件datepicker.js增加月和年过滤

最新推荐文章于 2024-09-02 08:42:57 发布

foenix66

最新推荐文章于 2024-09-02 08:42:57 发布

阅读量1k

点赞数

文章标签： datepicker.js onRender接口年份筛选月份筛选自定义规则

本文链接：https://blog.csdn.net/qq_31042143/article/details/125112549

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

时间选择控件datepicker.js增加月和年过滤

datepicker控件提供onrender函数接口，让用户可以选择哪个时间日期可以被选择。

$('#date').fdatepicker({
      onRender: function (date) {
        return date.valueOf() > new Date().valueOf() ? 'disabled' : '';
      }
    })

在这里插入图片描述
如果datepicker仅作为月份选择或者年份选择时，onrender接口就没有作用了

可以修改datepicker.js文件，在渲染Year和Month时，增加接口，让用户HTML代码可以确定年份和月份规则
增加onRenderYear(year)和onRenderMonth(year, month)接口

    this.onRender = options.onRender || function () { };
    this.onRenderYear = options.onRenderYear || function () { return ""; };
    this.onRenderMonth = options.onRenderMonth || function () { return ""; };

修改渲染年份代码

      for (var i = -1; i < 11; i++) {
        // html += '<span class="year' + (i == -1 || i == 10 ? ' old' : '') + (currentYear == year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : '') + '">' + year + '</span>';
        html += '<span class="year' + (i == -1 || i == 10 ? ' old' : '') + (currentYear == year ? ' active' : '') + " " + this.onRenderYear(year) + '">' + year + '</span>';
        year += 1;
      }
      yearCont.html(html);

修改渲染月份代码

      while (i < 12) {
        var cls = "month " + this.onRenderMonth(year, i);
        html += '<span class="' + cls + '">' + dates[this.language].monthsShort[i++] + '</span>';
      }
      this.picker.find('.datepicker-months td').html(html);