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

Curiosity

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

munsterlander

@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

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

closed feature request : material design datetime picker ? #1479