Merge pull request #1 from IgniteUI/date-editor-format

Updating date editor formatting sample.

Author: damyanpetev

HTMLSamples/editors/date-and-time-formats.html

@@ -38,39 +38,41 @@ <h4>$$(time_config)</h4>
 
         <h4>$$(constraints)</h4>
         <div id="constraintEditor"></div>
-    
+        <br />
+        <button id="setMax">$$(set_after_max)</button>
     </div>
 
     <script>
 
         $(function () {
 
             $("#defaultDateEditor").igDateEditor({
-                width: 200,
                 value: new Date(2015, 9, 9)
             });
 
             $("#dateTimeEditor").igDateEditor({
-                width: 200,
                 dateInputFormat: "dateTime",
                 value: new Date(2015, 9, 9, 9, 9)
             });
 
             $("#timeEditor").igDateEditor({
-                width: 200,
                 dateInputFormat: "time",
                 value: new Date(2015, 9, 9, 9, 9)
             });
 
             $("#constraintEditor").igDateEditor({
-                width: 200,
+                dateInputFormat: "MM/dd/yyyy",
+                dateDisplayFormat: "dddd, MMM d, yyyy",
                 minValue: new Date(2012, 9, 24),
-                maxValue: new Date(2018, 9, 24),
-                value: new Date(2015, 9, 9),
-                nullText: "$$(enter_today)",
-                unfilledCharsPrompt: " "
+                maxValue: new Date(2017, 9, 24),
+                value: new Date(2017, 9, 9)
             });
 
+            $("#setMax").igButton({
+                click: function () {
+                    $("#constraintEditor").igDateEditor("value", new Date(2018, 9, 26));
+                }
+            });
         });
 
     </script>

HTMLSamples/editors/strings-en.json

@@ -1,6 +1,6 @@
 {
   "Change_DatePickers_dataMode": "Change DatePickers dataMode option",
-  "constraints": "Date Contraints, Hide Input Mask",
+  "constraints": "Using different display format and Date constraints. Note the display format is used for the warning shown when entering value outside the min/max range.",
   "Control_Name": "Control Name",
   "date_config": "Date and Time Configuration",
   "Date_Object":"Date object",
@@ -24,6 +24,7 @@
   "KO_Order_Date": "Order Date",
   "KO_Plain_Editors": "Plain INPUTs",
   "KO_Ship_Date": "Ship Date",
+  "set_after_max": "Set after maximum",
   "Submit": "Submit",
   "time_config": "Time Configuration",
   "Title_angular": "AngularJS",

HTMLSamples/editors/strings-ja.json

@@ -1,6 +1,6 @@
 {
   "Change_DatePickers_dataMode": "DatePicker の dataMode オプションを変更",
-  "constraints": "日付の制約、入力マスクの非表示",
+  "constraints": "別の表示形式および Date 制限を使用します。表示形式は最小/最大範囲以外の値の入力で表示される警告に使用されます。",
   "Control_Name": "コントロール名",
   "date_config": "日付と時間構成",
   "DatePickers_submited_values": "DatePicker の送信された値",
@@ -24,6 +24,7 @@
   "KO_Order_Date": "注文日",
   "KO_Plain_Editors": "プレーン INPUT 要素",
   "KO_Ship_Date": "出荷日付",
+  "set_after_max": "最大日付以降に設定",
   "Submit": "送信",
   "time_config": "時間構成",
   "Title_angular": "AngularJS との連携",