javascript JQuery Quarter DatePicker

pw9qyyiw  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(122)

我试着使用季度datepicker从:http://jsfiddle.net/4mwk0d5L/1/
但是每次我运行代码时,我都会遇到这个问题:无法将属性'qtrs'设置为undefined,我在jsfiddle中写了完全相同的内容,项目中的脚本标签:

`<script type="text/javascript" src="<%= Page.ResolveUrl("~/Content/js/jquery-ui.multidatespicker.js")%>"></script>`

我错过了任何剧本!

5vf7fwbs

5vf7fwbs1#

我参考了这段代码,并修改了它的概念,在jquery-ui.js中实现了它。

$("#your_input_element").datepicker({
        yearRange: "c-100:c",
        changeMonth: true,
        changeYear: true,
        monthNames: ["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],
        monthNamesShort: ["Q1(Jan-Feb-Mar)",
                          "Q2(Apr-May-Jun)",
                          "Q3(Jul-Aug-Sep)",
                          "Q4(Oct-Nov-Dec)", "", "", "", "", "", "", "", ""],
        showButtonPanel: true,
        closeText: 'Select',
        onClose: function (dateText, inst) {//after click select or open menu then close
            $(this).val(inst.selectedYear + "-" + 
            inst.settings.monthNamesShort[inst.selectedMonth]);
        },
        beforeShow: function (input, inst) {
            $(input).blur(); // remove focus from input field for a bug where the datepicker menu is shown and cannot be hidden when there is a focus conflict
            if (inst.selectedYear !== 0) {//open datepicker menu not at first time
                $(this).datepicker('option', 'defaultDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            } else {//open datepicker menu at first time
                $(this).datepicker('option', 'defaultDate', new Date(moment().year(), 1, 1));
        }
    }
    }).focus(function () {
        /*$(".ui-datepicker-month").hide();*/
        $(".ui-datepicker-month option").each((idx, ele) => {
            if (parseInt($(ele).val()) >= 4)
                $(ele).hide();
            });
        $(".ui-datepicker-calendar").hide();
        $(".ui-datepicker-current").hide();
        /*$(".ui-datepicker-close").hide();*/
        /*$(".ui-datepicker-prev").hide();
        $(".ui-datepicker-next").hide();*/
        $("#ui-datepicker-div").position({
            my: "left top",
            at: "left bottom",
            of: $(this)
        });
    }).attr("readonly", false);

参考文献:

  1. how-to-change-bootstrap-datepicker-month-view-to-display-quarters
  2. jquery-ui-datepicker-to-show-year-only

相关问题