MaterialDatePicker - Added Formating Rules table for DateFormat construction

Author: kevzlou7979

src/main/java/gwt/material/design/demo/client/application/components/forms/listbox/ListBoxView.java

@@ -44,13 +44,12 @@ interface Binder extends UiBinder<Widget, ListBoxView> {
     MaterialListBox lstOptions, lstSetValue, lstAddOptions, lstRemoveOptions, lstLazy;
 
     @UiField
-    MaterialListValueBox<Hero> lstValueBox, lstValueBoxMultiple, lstEmptyPlacehoder, lstFocusAndBlur;
+    MaterialListValueBox<Hero> lstValueBox, lstEmptyPlacehoder, lstFocusAndBlur;
 
     @Inject
     ListBoxView(Binder uiBinder) {
         initWidget(uiBinder.createAndBindUi(this));
 
-        buildListHeroes(lstValueBoxMultiple);
         buildListHeroes(lstValueBox);
         buildListHeroes(lstEmptyPlacehoder);
 

src/main/java/gwt/material/design/demo/client/application/components/pickers/PickersView.ui.xml

@@ -22,6 +22,13 @@
              xmlns:g="urn:import:com.google.gwt.user.client.ui"
              xmlns:m="urn:import:gwt.material.design.client.ui"
              xmlns:demo="urn:import:gwt.material.design.demo.client.ui">
+    <ui:style gss="true">
+        @external format-table;
+
+        table.format-table tr td {
+            padding: 20px;
+        }
+    </ui:style>
   <g:HTMLPanel>
       <m:MaterialRow addStyleNames="code">  
         <m:MaterialTitle title="Basic"  description="You can easily add placeholder to indicate a label into your datepicker."/>
@@ -118,14 +125,82 @@
 
       <m:MaterialRow addStyleNames="code">
         <m:MaterialTitle title="Formats" description="You can set the format of the date picker by adding format='FORMAT'"/>
-        <m:MaterialDatePicker ui:field="dpFormat" grid="s12" placeholder="Custom Format" format="Yehey yyyy mm dd"/>
+        <m:MaterialDatePicker ui:field="dpFormat" grid="s12" placeholder="Custom Format" format="YYYY/MM/DD"/>
         <m:MaterialButton ui:field="btnSetFormat" text="Set Date with custom format"/>
 
         <demo:PrettyPre addStyleNames="lang-xml">
           &emsp;&lt;m:MaterialDatePicker ui:field="dpFormat" placeholder="Custom Format" format="yyyy mm dd"/>
         </demo:PrettyPre>
       </m:MaterialRow>
-    
+
+      <m:MaterialRow addStyleNames="code">
+        <m:MaterialTitle title="Formatting Rules" description="The following rules can be used to format any date supported by Pickadate JS (Our core datepicker API)" />
+        <g:HTMLPanel>
+            <table class="format-table striped">
+                <thead>
+                    <tr>
+                        <th>Rule</th>
+                        <th>Description</th>
+                        <th>Result</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr>
+                        <td>d</td>
+                        <td>Date of the month</td>
+                        <td>1 – 31</td>
+                    </tr>
+                    <tr>
+                        <td>dd</td>
+                        <td>Date of the month with a leading zero</td>
+                        <td>01 – 31</td>
+                    </tr>
+                    <tr>
+                        <td>ddd</td>
+                        <td>Day of the week in short form</td>
+                        <td>Sun – Sat</td>
+                    </tr>
+                    <tr>
+                        <td>dddd</td>
+                        <td>Day of the week in full form</td>
+                        <td>Sunday – Saturday</td>
+                    </tr>
+                    <tr>
+                        <td>m</td>
+                        <td>Month of the year</td>
+                        <td>1 – 12</td>
+                    </tr>
+                    <tr>
+                        <td>mm</td>
+                        <td>Month of the year with a leading zero</td>
+                        <td>01 – 12</td>
+                    </tr>
+                    <tr>
+                        <td>mmm</td>
+                        <td>Month name in short form</td>
+                        <td>Jan – Dec</td>
+                    </tr>
+                    <tr>
+                        <td>mmmm</td>
+                        <td>Month name in full form</td>
+                        <td>January – December</td>
+                    </tr>
+                    <tr>
+                        <td>yy</td>
+                        <td>Year in short form *</td>
+                        <td>00 – 99</td>
+                    </tr>
+                    <tr>
+                        <td>yyyy</td>
+                        <td>Year in full form</td>
+                        <td>2000 – 2999</td>
+                    </tr>
+                </tbody>
+            </table>
+        </g:HTMLPanel>
+      </m:MaterialRow>
+
       <m:MaterialRow addStyleNames="code">
         <m:MaterialTitle title="Date Limit" description="You can limit the date by calling setDateLimit(Date min, Date max) method."/>
         <m:MaterialDatePicker ui:field="dpLimit" placeholder="With Limit"/>