Monaca Onsen UI Discord Chat Github Repo

Vanilla JS Onsen-ui: type="date" not working in Safari test

  • Hello Good People,

    I’m new to Onsen-ui. I’m not a super coder. I’m using the vanilla flavor of Onsen with javascript to tinker with the most excellent “Todo” example. I am trying to get a simple datepicker/calendar popup from an <ons-input></ons-input> tag.

    <ons-list-item modifier="nodivider">
          <div class="center">
            <ons-input id="testdate-input" type="date" placeholder="Test date" float></ons-input>

    I’ve also tried:

    <ons-input id="testdate-input" type="date" name= "test" placeholder="Test date" float>

    This simple code isn’t working for me when I test it in Safari. There is no calendar popup. I’ve read the WC3 and it looks like I’m doing it properly for HTML5. I haven’t tried any plugins as they all seem to depend on angular, jQuery or cordova.

    Is there an error or (probably) something that I am missing. I’ve searched the form and found a few posts related to angular, but nothing relates to this issue.

    I’ve also noticed some kind of a bug possible report. Is this an onset-ui bug. Help would be appreciated and rewarded with a smile. :smiley:
    TIA -Rachel

  • @Curiosity The date type isn’t supported by Onsen as an attribute. You can use a regular input, such as: <input id="testdate-input" type="date"></input> and then style it with CSS to get the same result.

    There are also some other styles here:

    Datepicker plugin here:

    And finally, a response from the Onsen team here regarding these: