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](http://stackoverflow.com/questions/3846735/trigger-a-select-form-element-to-show-its-options-open-drop-down-options-list) — Calvin Scherle, Dec 02 '14 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, Dec 02 '14 at 13:24

score 3 · Accepted Answer · answered Dec 18 '14 at 10:26

3

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

answered Dec 18 '14 at 10:26

Joe Austin

557
7
24

score 2 · Answer 2 · answered Jul 22 '22 at 02:09

2

2022 Update

You can use showPicker()

IE:

$('#myDatePicker').showPicker()

answered Jul 22 '22 at 02:09

jamesdlivesinatree

1,016
3
11
36

score -1 · Answer 3 · answered Dec 02 '14 at 13:40

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');
            });

        });

Per the OP: _"I don't want to use a datepicker library..."_ – War10ck Dec 02 '14 at 13:43 — War10ck, Dec 02 '14 at 13:43

HTML5 input date type jQuery trigger

3 Answers3