CODEWITHSUNDEEP
jquerydatepickerjquery-ui-datepicker
Saadia
Saadia

Reputation: 856

jQuery month/year picker not showing month/year in input on making a selection

I am working with jquery datepicker, and I only need a month and an year. When i click on the input field the month and year picker pops up just fine. The problem is when i select any month or year the updated data does not reflect on input field unless i click else where on the page.

The is how i am displaying the picker

$(function () {
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'MM yy',
        onClose: function (dateText, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});

What am i doing wrong here? I just need the input field to reflect the updated selection as soon as i click on any month or year.

Upvotes: 0

Views: 1600

Answers (1)

JYoThI
JYoThI

Reputation: 12085

use onChangeMonthYear instead of onClose

onChangeMonthYear Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

$(function () {
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'MM yy',
        onChangeMonthYear: function (year,month, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});


$(function () {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            dateFormat: 'MM yy',
            onChangeMonthYear: function (year,month, inst) {
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); console.log(inst.selectedYear,inst.selectedMonth);
            }
        });
    });
<input class="datepicker" type="text" /><br />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions