jQuery Datepicker UI close only on click of close button or done button

Question

I am using jQuery UI Datepicker,..

Datepicker works fine but it gets closed when we click outside of the calender or when we click the Escape button. But I want my date picker to be closed only when we click The done button.

$(".date-picker").datepicker({
    dateFormat: 'mm-yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,

    onclose: function(dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
});

How can I do this?

score 4 · Answer 1 · edited May 23 '17 at 10:30

This solution has also been posted in jquery DatePicker Done button, and it works perfectly:

$(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

CSS:

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

and HTML:

<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker">

See how it's working in this jsfiddle.

Source: http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

score 1 · Answer 2 · answered Sep 24 '12 at 14:40

There is no control over the triggers to close the datepicker. The closest you can get is probably create an inline datepicker and show/hide at your will. But then, the "Done" button is not presented in the inline datepicker, as the inline datepicker doesn't normally need to be hidden. Here's the closest I got, without getting to hacky:

http://jsfiddle.net/william/c8Kcs/1/

HTML:

<input id="date" /> <button id="done">Done</button>
<div class="date-picker"></div>

JavaScript:

$(".date-picker").hide().datepicker({
    dateFormat: 'mm-yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    altField: '#date'
});

$('#date').click(function() {
    $(".date-picker").show();
    $('#done').show();
});

$('#done').hide().click(function() {
    $(".date-picker").hide();
    $(this).hide();
});

jQuery Datepicker UI close only on click of close button or done button

2 Answers2