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?

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?

• javascript
• jquery
• html

• Why the input is hidden ? Do you want to click on button and then show in input the button date ? – Ɛɔıs3 Commented Sep 7, 2015 at 9:32
• 1 @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 Commented Sep 7, 2015 at 9:33
• @series0ne Which mobile OS/browser are you using? – Vucko Commented Sep 7, 2015 at 9:40
• @Vucko - iOS, but it needs to work on Android and Windows Mobile too ideally – Matthew Layton Commented Sep 7, 2015 at 9:51
• @series0ne well, type=date has a bed support (caniuse), especially for mobile browsers. I'd remend that you try with this answer. – Vucko Commented Sep 7, 2015 at 9:56

3 Answers 3

Please browse with your phone.

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

Try using showPicker() api:

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

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

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

<script src="https://ajax.googleapis./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>