AltField and AltFormat Demos

Added demo codes for AltField and AltFormat in Unix and ODBC date
formats.

Author: KidSysco

demo/examples.js

@@ -94,6 +94,20 @@ $(document).ready(function() {
         title: 'MonthPicker Dialog Test',
         modal: true
     });
+    
+    $('#AltMonthField').MonthPicker({
+        SelectedMonth: 'Jan, 2016',
+        MonthFormat: 'M, yy', // Short month name, Full year.
+        AltFormat: '@', // Unix time stamp.
+        AltField: '#serverValue' // Selector for hidden input.
+    });
+
+    $('#AltMonthField2').MonthPicker({
+        SelectedMonth: 'Jan, 2016',
+        MonthFormat: 'M, yy', // Short month name, Full year.
+        AltFormat: 'yy-dd-mm', // ODBC time stamp.
+        AltField: '#serverValue2' // Selector for hidden input.
+    });
 
     $("h1").text( $("h1").text().replace('@VERSION', $.MonthPicker.VERSION) );
 });

demo/index.html

@@ -188,11 +188,42 @@ <h3>Month Format Demonstration</h3>
                     <option value="MM &apos;in the year&apos; yy">With text - MM 'in the year' yy</option>
                 </select>
             </p>
-
-            <h3>Inline Menu Demonstration</h3>
+            
+            <h3>Alternate Field/Format Demonstration</h3>
             <p>
-                This demonstrates the Month Picker menu inlined in a div tag.
-                <div id='InlineMenu'></div>
+                This demonstrates how the <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltField-Option' target="_blank">AltField</a> and 
+                <a href='https://github.com/KidSysco/jquery-ui-month-picker/wiki/AltFormat-Option' target="_blank">AltFormat</a> options work so that values shown to the user can be different than what is submitted to the server.
+            <table style="margin-top: -25px;">
+            <tr>
+                <td>Value shown to user:</td>
+                <td>&nbsp; &nbsp; </td>
+                <td>Unix Date value sent to server:</td>
+            </tr>
+            <tr>
+                <td><input id="AltMonthField" style='width:100px;' /></td>
+                <td>&nbsp; &nbsp; </td>
+                <td><input name='selectedMonth' id="serverValue" />
+                    <!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
+                </td>
+            </tr>
+            <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+            </tr>
+            <tr>
+                <td>Value shown to user:</td>
+                <td>&nbsp; &nbsp; </td>
+                <td>ODBC Date value sent to server:</td>
+            </tr>
+            <tr>
+                <td><input id="AltMonthField2" style='width:100px;' /></td>
+                <td>&nbsp; &nbsp; </td>
+                <td><input name='selectedMonth2' id="serverValue2" />
+                    <!-- This could be a hidden input, I made it a text so you cen see what gets sent to the server -->
+                </td>
+            </tr>
+            </table>
             </p>
 
             <h3>jQuery UI Dialog Integration Demonstration</h3>
@@ -202,6 +233,12 @@ <h3>jQuery UI Dialog Integration Demonstration</h3>
                 <br />
                 <button type="button" id="LaunchDialog" onclick="$('#Modal').dialog('open');">Launch Dialog</button>
             </p>
+            
+            <h3>Inline Menu Demonstration</h3>
+            <p>
+                This demonstrates the Month Picker menu inlined in a div tag.
+                <div id='InlineMenu'></div>
+            </p>
 
             <h3>HTML 5 Month Input Type Support</h3>
             <p>