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>
          </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



  • @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


Log in to reply