JQuery Quarter DatePicker

Question

I tried to use Quarter datepicker from : http://jsfiddle.net/4mwk0d5L/1/

but every time i run code i get this issue: Cannot set property 'qtrs' of undefined, i wrote exactly the same in jsfiddle, the script tag in project :

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

So did i miss any script!

This fiddle demo is based on Bootstrap date picker, i think you are using jQuery date picker. I reproduce same error while using "jQuery date picker". So kindly check your date-picker. — Jani Devang, Sep 10 '18 at 13:29

score 0 · Answer 1 · answered May 11 '23 at 06:28

I referred to this code and adapted its concept to implement it in 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);

Reference：

JQuery Quarter DatePicker

1 Answers1