HTML5 button to trigger date input on mobile

Question

I have a HTML5 design where I want to be able to use a button to display a date, but I want to use the HTML5 input type="date" to select the date.

Here is my code:

<button type="button" id="btnDate" class="btn btn-primary">
    <span class="glyphicon glyphicon-calendar"></span> <span class="date">27 Jul 2015</span>
</button>
<input type="date" class="hidden" id="tbDate" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnDate").click(function () {
            $("#tbDate").focus();
        });
    });             
</script>

I've tried focus() and click() - neither work...any ideas?

Why the input is hidden ? Do you want to click on button and then show in input the button date ? — w3spi, Sep 07 '15 at 09:32
@Zl3n I don't want the input displayed at all - only the button, but I want the button to trigger the mobile's native date picker. — Matthew Layton, Sep 07 '15 at 09:33
@Vucko - iOS, but it needs to work on Android and Windows Mobile too ideally — Matthew Layton, Sep 07 '15 at 09:51
@series0ne well, `type=date` has a [bed support](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input) ([caniuse](http://caniuse.com/#feat=input-datetime)), especially for mobile browsers. I'd recommend that you try with [this answer](http://stackoverflow.com/a/30895180/1763929). — Vucko, Sep 07 '15 at 09:56
`.click()` works on Chrome/Android but not on Firefox/Android as long as the input is hidden by `visibility:hidden`. It doesn't work if it's hidden by `display:none` — hultqvist, Oct 10 '19 at 10:33

score 3 · Answer 1 · answered Feb 28 '17 at 03:45

3

Please browse with your phone.

<label for="dateInput">click button</label>
<input type="date" id="dateInput" />

answered Feb 28 '17 at 03:45

MaxWang

31
2

Err, there is no button in your example. There's only a label and a text box. Perhaps you missed a step somewhere? – jww Feb 28 '17 at 04:04
Label tag instead of button.(From google translation) – MaxWang Feb 28 '17 at 04:16
There's no option to run code snippet when I opened it from mobile. – thisisdee Aug 21 '18 at 16:47

score 0 · Accepted Answer · answered Sep 07 '15 at 09:35

0

You need set val() for input. Hope this help

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="btnDate" class="btn btn-primary">
    <span class="glyphicon glyphicon-calendar"></span> <span class="date">27 Jul 2015</span>
</button>
<input type="date" class="hidden" id="tbDate" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnDate").click(function () {
          var date = new Date("2015, 07, 27");
          var setDate = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-"+("0" + date.getDate()).slice(-2);
            $("#tbDate").val(setDate);
        });
    });             
</script>

answered Sep 07 '15 at 09:35

Neo

1,469
3
23
40

2

Why is this the answer? This does not trigger the `` in order to select a date as asked in the question. – Lifz Oct 02 '17 at 13:49
he want a button to input date. I understand like that. – Neo Oct 02 '17 at 18:19
1

He wants a button to *display* the date but he said "I want to use the HTML5 input type="date" to select the date." – Lifz Oct 03 '17 at 12:37

score 0 · Answer 3 · edited Jun 27 '23 at 09:23

0

Try using showPicker() api:

const btn = document.getElementById("btn");
const dateComponent = document.getElementById("date");

btn.addEventListner("click", () => {
    dateComponent.showPicker();
})

edited Jun 27 '23 at 09:23

Tyler2P

2,324
26
22
31

answered Jun 26 '23 at 07:30

Dheeraj T

1
1

HTML5 button to trigger date input on mobile

3 Answers3