Datepicker with month and year only

Question

I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..

Can anyone help me out?

Answer 1

You can modify the jQuery datepicker to only allow the user to select certain dates, in this case we could restrict it to the first of the month:

$(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst
})

function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

You can also modify the options to display the date differently:

$(".datepicker").datepicker({
    dateFormat: 'mm/yy'
});

Combine the two and we get:

$(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst,
    dateFormat: 'mm/yy'
})

function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

You can also use this to restrict your second datepicker:

var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to

$("#myFirstDatePicker").datepicker({
    beforeShowDay: disableAllExceptCurrentMonth,
    dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});

function disableAllExceptCurrentMonth(date) {
    if (date.getMonth() != restrictedMonth) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

Answer 2

You can use this monthpicker jquery widget : https://github.com/lucianocosta/jquery.mtz.monthpicker

Answer 3

If you can work in html5 i would suggest to use the new month input support for newer browser

simply use and let the magic happen.

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month

Answer 4

Datepicker can show month and year only without using css

.ui-datepicker-calendar {
    display: none;
}?

You can do like this

var dp=$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

dp.on('changeMonth', function (e) {    
   //do something here
   alert("Month changed");
});

Documentation here