Demos: Update old dates & remove +1 from mask in Editors (#33025)

Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>

Author: r-farkhutdinov

apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.html

@@ -98,7 +98,7 @@
     <dx-text-box
       label="Phone"
       [inputAttr]="{ 'aria-label': 'Phone' }"
-      mask="+1 (000) 000-0000"
+      mask="(X00) 000-0000"
       id="phone"
       [maskRules]="phoneRules"
       [stylingMode]="stylingMode"

apps/demos/Demos/Common/EditorAppearanceVariants/React/App.tsx

@@ -159,7 +159,7 @@ export default function App() {
         <TextBox
           id="phone"
           stylingMode={stylingMode}
-          mask="+1 (000) 000-0000"
+          mask="(X00) 000-0000"
           inputAttr={phoneLabel}
           maskRules={phoneRules}
           label="Phone"

apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js

@@ -141,7 +141,7 @@ export default function App() {
         <TextBox
           id="phone"
           stylingMode={stylingMode}
-          mask="+1 (000) 000-0000"
+          mask="(X00) 000-0000"
           inputAttr={phoneLabel}
           maskRules={phoneRules}
           label="Phone"

apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue

@@ -97,7 +97,7 @@
         :mask-rules="phoneRules"
         :input-attr="{ 'aria-label': 'Phone' }"
         id="phone"
-        mask="+1 (000) 000-0000"
+        mask="(X00) 000-0000"
         label="Phone"
       >
         <DxValidator>

apps/demos/Demos/Common/EditorAppearanceVariants/jQuery/index.js

@@ -74,7 +74,7 @@ $(() => {
 
   const phone = $('#phone').dxTextBox({
     label: 'Phone',
-    mask: '+1 (000) 000-0000',
+    mask: '(X00) 000-0000',
     inputAttr: { 'aria-label': 'Phone' },
     maskRules: {
       X: /[02-9]/,

apps/demos/Demos/DateBox/Formatting/Angular/app/app.component.html

@@ -3,7 +3,7 @@
     <div class="dx-field-label">Locale-dependent format</div>
     <div class="dx-field-value">
       <dx-date-box
-        placeholder="12/31/2018, 2:52 PM"
+        placeholder="12/31/2025, 2:52 PM"
         type="datetime"
         [showClearButton]="true"
         [useMaskBehavior]="true"
@@ -16,7 +16,7 @@
     <div class="dx-field-label">Built-in predefined format</div>
     <div class="dx-field-value">
       <dx-date-box
-        placeholder="10/16/2018"
+        placeholder="10/16/2025"
         [showClearButton]="true"
         [useMaskBehavior]="true"
         displayFormat="shortdate"
@@ -31,7 +31,7 @@
     <div class="dx-field-label">Locale Data Markup Language (LDML) pattern</div>
     <div class="dx-field-value">
       <dx-date-box
-        placeholder="Tuesday, 16 of Oct, 2018 14:52"
+        placeholder="Thursday, 16 of Oct, 2025 14:52"
         [showClearButton]="true"
         [useMaskBehavior]="true"
         displayFormat="EEEE, d of MMM, yyyy HH:mm"
@@ -46,7 +46,7 @@
     <div class="dx-field-label">Format with literal characters</div>
     <div class="dx-field-value">
       <dx-date-box
-        placeholder="Year: 2018"
+        placeholder="Year: 2025"
         [showClearButton]="true"
         [useMaskBehavior]="true"
         displayFormat="'Year': yyyy"

apps/demos/Demos/DateBox/Formatting/Angular/app/app.component.ts

@@ -22,7 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 })
 
 export class AppComponent {
-  date: Date = new Date(2018, 9, 16, 15, 8, 12);
+  date: Date = new Date(2025, 9, 16, 15, 8, 12);
 }
 
 bootstrapApplication(AppComponent, {

apps/demos/Demos/DateBox/Formatting/React/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import DateBox from 'devextreme-react/date-box';
 
-const date = new Date(2018, 9, 16, 15, 8, 12);
+const date = new Date(2025, 9, 16, 15, 8, 12);
 const dataTimeLabel = { 'aria-label': 'Date Time' };
 const dateLabel = { 'aria-label': 'Date' };
 
@@ -14,7 +14,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               type="datetime"
-              placeholder="12/31/2018, 2:52 PM"
+              placeholder="12/31/2025, 2:52 PM"
               showClearButton={true}
               inputAttr={dataTimeLabel}
               useMaskBehavior={true}
@@ -26,7 +26,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="10/16/2018"
+              placeholder="10/16/2025"
               showClearButton={true}
               inputAttr={dateLabel}
               useMaskBehavior={true}
@@ -40,7 +40,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="Tuesday, 16 of Oct, 2018 14:52"
+              placeholder="Thursday, 16 of Oct, 2025 14:52"
               showClearButton={true}
               inputAttr={dateLabel}
               useMaskBehavior={true}
@@ -54,7 +54,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="Year: 2018"
+              placeholder="Year: 2025"
               showClearButton={true}
               useMaskBehavior={true}
               inputAttr={dateLabel}

apps/demos/Demos/DateBox/Formatting/ReactJs/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import DateBox from 'devextreme-react/date-box';
 
-const date = new Date(2018, 9, 16, 15, 8, 12);
+const date = new Date(2025, 9, 16, 15, 8, 12);
 const dataTimeLabel = { 'aria-label': 'Date Time' };
 const dateLabel = { 'aria-label': 'Date' };
 function App() {
@@ -13,7 +13,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               type="datetime"
-              placeholder="12/31/2018, 2:52 PM"
+              placeholder="12/31/2025, 2:52 PM"
               showClearButton={true}
               inputAttr={dataTimeLabel}
               useMaskBehavior={true}
@@ -25,7 +25,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="10/16/2018"
+              placeholder="10/16/2025"
               showClearButton={true}
               inputAttr={dateLabel}
               useMaskBehavior={true}
@@ -39,7 +39,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="Tuesday, 16 of Oct, 2018 14:52"
+              placeholder="Thursday, 16 of Oct, 2025 14:52"
               showClearButton={true}
               inputAttr={dateLabel}
               useMaskBehavior={true}
@@ -53,7 +53,7 @@ function App() {
           <div className="dx-field-value">
             <DateBox
               defaultValue={date}
-              placeholder="Year: 2018"
+              placeholder="Year: 2025"
               showClearButton={true}
               useMaskBehavior={true}
               inputAttr={dateLabel}

apps/demos/Demos/DateBox/Formatting/Vue/App.vue

@@ -9,7 +9,7 @@
             :use-mask-behavior="true"
             :input-attr="{ 'aria-label': 'Date' }"
             type="datetime"
-            placeholder="12/31/2018, 2:52 PM"
+            placeholder="12/31/2025, 2:52 PM"
           />
         </div>
       </div>
@@ -21,7 +21,7 @@
             :use-mask-behavior="true"
             :value="date"
             :input-attr="{ 'aria-label': 'Date' }"
-            placeholder="10/16/2018"
+            placeholder="10/16/2025"
             display-format="shortdate"
             type="date"
           />
@@ -36,7 +36,7 @@
             :input-attr="{ 'aria-label': 'Date' }"
             :value="date"
             type="datetime"
-            placeholder="Tuesday, 16 of Oct, 2018 14:52"
+            placeholder="Thursday, 16 of Oct, 2025 14:52"
             display-format="EEEE, d of MMM, yyyy HH:mm"
           />
         </div>
@@ -49,7 +49,7 @@
             :use-mask-behavior="true"
             :input-attr="{ 'aria-label': 'Date' }"
             :value="date"
-            placeholder="Year: 2018"
+            placeholder="Year: 2025"
             display-format="'Year': yyyy"
             type="date"
           />
@@ -61,7 +61,7 @@
 <script setup lang="ts">
 import DxDateBox from 'devextreme-vue/date-box';
 
-const date = new Date(2018, 9, 16, 15, 8, 12);
+const date = new Date(2025, 9, 16, 15, 8, 12);
 </script>
 <style>
 .dx-fieldset {