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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • C

    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>
      </div>
    </ons-list-item>

    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

    0 1 Reply
  • 侍

    @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:
    https://community.onsen.io/topic/210/datetime-picker/2

    Datepicker plugin here:
    https://docs.monaca.io/en/reference/third_party_phonegap/datepicker/

    And finally, a response from the Onsen team here regarding these:
    https://github.com/OnsenUI/OnsenUI/issues/1479

    joeblew99 created this issue in OnsenUI/OnsenUI

    closed feature request : material design datetime picker ? #1479

    0