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 ? — Ɛɔıs3
– Ɛɔıs3, Commented Sep 7, 2015 at 9: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
– Matthew Layton, Commented Sep 7, 2015 at 9:33
@Vucko - iOS, but it needs to work on Android and Windows Mobile too ideally — Matthew Layton
– Matthew Layton, Commented Sep 7, 2015 at 9:51
@series0ne well, type=date has a bed support (caniuse), especially for mobile browsers. I'd recommend that you try with this answer. — Vucko
– Vucko, Commented Sep 7, 2015 at 9:56

MaxWang · Accepted Answer · 2017-02-28 03:45:22Z

3

Please browse with your phone.

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

answered Feb 28, 2017 at 3:45

MaxWang

312 bronze badges

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

3 Comments

jww Over a year ago

Err, there is no button in your example. There's only a label and a text box. Perhaps you missed a step somewhere?

MaxWang Over a year ago

Label tag instead of button.(From google translation)

thisisdee Over a year ago

There's no option to run code snippet when I opened it from mobile.

Tyler2P · Accepted Answer · 2023-06-27 09:23:59Z

1

Try using showPicker() api:

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

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

edited Jun 27, 2023 at 9:23

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jun 26, 2023 at 7:30

Dheeraj T

112 bronze badges

Comments

Neo · Accepted Answer · 2015-09-07 09:35:33Z

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 7, 2015 at 9:35

Neo

1,4695 gold badges23 silver badges40 bronze badges

3 Comments

Lifz Over a year ago

Why is this the answer? This does not trigger the <input='date' /> in order to select a date as asked in the question.

Neo Over a year ago

he want a button to input date. I understand like that.

Lifz Over a year ago

He wants a button to display the date but he said "I want to use the HTML5 input type="date" to select the date."

Collectives™ on Stack Overflow

HTML5 button to trigger date input on mobile

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related