📺 add demo custom format

Author: Irfan Maulana

demo/index.html

@@ -57,14 +57,14 @@ <h2 class="subtitle">
 
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Compact Mode</p>
+            <p class="title is-4">Range Date Normal Mode</p>
             <br>
             <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
             <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
-              <div class="compact-wrapper">
-                <rangedate-picker @selected="onDateSelected" compact="true" i18n="EN">
+              <div class="daterange-wrapper">
+                <rangedate-picker @selected="onDateSelected" i18n="EN">
                 </rangedate-picker>
               </div>
             </div>
@@ -74,14 +74,14 @@ <h2 class="subtitle">
 
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Normal Mode</p>
+            <p class="title is-4">Range Date Right To Left</p>
             <br>
             <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
             <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN">
+                <rangedate-picker @selected="onDateSelected" i18n="EN" righttoleft="true">
                 </rangedate-picker>
               </div>
             </div>
@@ -91,38 +91,41 @@ <h2 class="subtitle">
 
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Right To Left</p>
+            <p class="title is-4">Range Date Custom Format</p>
             <br>
             <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
             <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN" righttoleft="true">
+                <rangedate-picker @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
                 </rangedate-picker>
               </div>
             </div>
 
           </div>
         </div>
 
+      </div>
+      <div class="columns is-centered">
+
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Custom Format</p>
+            <p class="title is-4">Range Date Compact Mode</p>
             <br>
             <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
             <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
-              <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
+              <div class="compact-wrapper">
+                <rangedate-picker @selected="onDateSelected" compact="true" i18n="EN">
                 </rangedate-picker>
               </div>
             </div>
 
           </div>
         </div>
-
+        
       </div>
     </div>
   </main>