hiding/displaying a datepicker on custom button click

Question

How do I display/hide a date picker only on click on a custom button?

My objective is to disable the functionality of the date picker by hiding it when I click somewhere other than the date picker.

add some code what you have tried yet. stackoverflow.com/questions/2611515/… stackoverflow.com/questions/20239457/… — shafiq.rst
– shafiq.rst, Commented Aug 6, 2015 at 12:38

Irvin Dominin · Accepted Answer · 2015-08-06 12:49:47Z

1

Consider to use showOn button option, it enable a button near the datepicker.

You can use show and hide datepicker methods in order to toggle the visibility.

In the demo I have blocked the opening/closing anywhere so it's totally handled.

Code:

jQuery.datepicker._checkExternalClick = function () {};

$("#datepicker").datepicker({
    constrainInput: true,
    showOn: 'none',
    onSelect: function () {
        $(this).data('datepicker').inline = true;
    },
    onClose: function () {
        $(this).data('datepicker').inline = false;
    }
});

$('#toggle').click(function () {
    if ($(this).hasClass('opened')) {
        $("#datepicker").datepicker('hide');
    } else {
        $("#datepicker").datepicker('show');
    }
    $(this).toggleClass('opened');
});

Demo: http://jsfiddle.net/IrvinDominin/8wLg92x1/

answered Aug 6, 2015 at 12:49

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

hiding/displaying a datepicker on custom button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related