olton / Metro-UI-CSS

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
http://metroui.org.ua/
MIT License
7.03k stars 1.97k forks source link

Help! data-role="calendartpicker" #1188

Closed TorakikiSan closed 6 years ago

TorakikiSan commented 6 years ago

Sorry, but I'm going crazy because of a simple date field!

I have the date 04/09/2018 in format %d/%m/%Y.

I defined in the HEAD

<META charset="utf-8">
<META name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<META name="metro4:init" content="true">
<META name="metro4:locale" content="it-IT">
<META name="metro4:week_start" content="1">
<META name="metro4:date_format" content="%d/%m/%Y">
<META name="metro4:date_format_input" content="%d/%m/%Y">

and in the BODY

<DIV class="row mb-2">
   <DIV class="cell-sm-2">
      <LABEL class="text-secondary text-bold fg-lightOlive" for="PERIODO">Periodo</LABEL>
      <SELECT id="PERIODO" name="periodo" data-role="select" data-filter="false" size="1">
      <OPTION value="1" selected>Giornaliera</OPTION>
      <OPTION value="2">Settimanale</OPTION>
      <OPTION value="3">Mensile</OPTION>
      <OPTION value="4">Annuale</OPTION>
      </SELECT>
   </DIV>
   <DIV class="cell-sm-2">
      <LABEL class="text-secondary text-bold fg-lightOlive" for="DATA">Data</LABEL>
      <INPUT id="DATA" name="data"
             data-role="calendarpicker"
             data-cls-calendar-header="bg-lightOlive"
             value="04/09/2018"/>
   </DIV>
</DIV>

and in the image below here is what I get, the date 4/Sep/2018 becomes 9/Apr/ 2018.

date1

If instead of META use data-format and data-format-input directly on INPUT, the result does not change

   <DIV class="cell-sm-2">
      <LABEL class="text-secondary text-bold fg-lightOlive" for="DATA">Data</LABEL>
      <INPUT id="DATA" name="data"
             data-role="calendarpicker"
             data-cls-calendar-header="bg-lightOlive"
             data-format="%d/%m/%Y"
             data-format-input="%d/%m/%Y"
             value="04/09/2018"/>
   </DIV>

Obviously I'm using the latest version of Metro-UI, the 4.2.20 build 697

date2

Where's the mistake?

Thank's to all!

olton commented 6 years ago

data-input-format

olton commented 6 years ago

meta tag metro4:date_format_input not working, I added it for future. Use attributes to input directly.