1

How can i remove ui-datepicker-year from calender in Magento 2. I only want to make user select only date and month. How to achieve that.

I have removed this line of code from jquery-ui.js

if ( !inst.yearshtml ) {
        inst.yearshtml = "";
        if (secondary || !changeYear) {
            html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
        } else {
            // determine range of years to display
            years = this._get(inst, "yearRange").split(":");
            thisYear = new Date().getFullYear();
            determineYear = function(value) {
                var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
                    (value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
                    parseInt(value, 10)));
                return (isNaN(year) ? thisYear : year);
            };
            year = determineYear(years[0]);
            endYear = Math.max(year, determineYear(years[1] || ""));
            year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
            endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
            inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
            for (; year <= endYear; year++) {
                inst.yearshtml += "<option value='" + year + "'" +
                    (year === drawYear ? " selected='selected'" : "") +
                    ">" + year + "</option>";
            }
            inst.yearshtml += "</select>";

            html += inst.yearshtml;
            inst.yearshtml = null;
        }
    }

So the year dropdown is removed but still when i select date and month, it shows year in the textbox.

enter image description here

How to remove date from text box.

  • can you add code and output? – fmsthird May 3 '19 at 6:42
  • @magefms updated – summu May 6 '19 at 6:24
  • you display it in phtml file? – fmsthird May 6 '19 at 6:28
  • @magefms Yes its in phtml – summu May 6 '19 at 6:46
  • did you try hiding it on jquery, the same like this $(".ui-datepicker-year").hide(); – fmsthird May 6 '19 at 6:54
0

You can try this in your phtml file:

<script>
    require([
        'jquery',
        'jquery/ui'
    ], function($){
        $(document).ready(function(){
           $("#datepicker").datepicker({
           dateFormat: 'MM dd'
           });
        });
    });
</script>  

Note: where "#datepicker" is the id of your datetime picker input element

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.