HTML5 input date type jQuery trigger

Question

I'm trying to programmatically trigger the dropdown component (the calendar bit) of an input of type date (similar to clicking the down arrow on the input field). Is this possible? I don't want to use a datepicker library.

HTML:

<input type="date" id="myDatePicker">
<button id="myButton">Click Me</button>

JavaScript/jQuery:

$('#myButton').click(function(){
    //$('#myDatePicker').click();//Doesn't do anything...
    //$('#myDatePicker').blur();//Doesn't do anything...
    //$('#myDatePicker').change();//Doesn't do anything...
    //$('#myDatePicker').focus();//Doesn't do anything...
});

http://jsfiddle.net/joepegler/mvobkjcu/8/

Related: Trigger a select form element to show its options (open drop down options list) with Javascript — Calvin Scherle
– Calvin Scherle, Commented Dec 2, 2014 at 13:22
Basically according to that question you are not going to be able to achieve this without some plugin or complex workaround. — Calvin Scherle
– Calvin Scherle, Commented Dec 2, 2014 at 13:24

Joe Austin · Accepted Answer · 2014-12-18 10:26:56Z

3

Long story short it would appear that you can't. I used a datepicker instead.

answered Dec 18, 2014 at 10:26

Joe Austin

5577 silver badges25 bronze badges

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

Comments

jamesdlivesinatree · Accepted Answer · 2022-07-22 02:09:53Z

2

2022 Update

You can use showPicker()

IE:

$('#myDatePicker').showPicker()

answered Jul 22, 2022 at 2:09

jamesdlivesinatree

7504 gold badges18 silver badges43 bronze badges

Comments

Pandiyan Cool · Accepted Answer · 2014-12-02 13:40:31Z

-1

Check this out, (achieved this using plugin)

http://jsfiddle.net/pandiyancool/v6zpbmao/

    $(document).ready(function() {
            $("#myDatePicker").datepicker({
                showOn: 'button',
                buttonText: 'Click me',
                dateFormat: 'dd/mm/yy',
                constrainInput: true
            });

            $(".ui-datepicker-trigger").mouseover(function() {
                $(this).css('cursor', 'pointer');
            });

        });

answered Dec 2, 2014 at 13:40

Pandiyan Cool

6,5838 gold badges53 silver badges90 bronze badges

1 Comment

War10ck Over a year ago

Per the OP: "I don't want to use a datepicker library..."

Collectives™ on Stack Overflow

HTML5 input date type jQuery trigger

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related