DRB Demo: add disableOutOfRangeSelection property demonstration (#2964)

* add disableOutOfRangeSelection property demonstration * update baselines * PR requested changes * baseline updated * change reactJs demo
DevExpress · Nov 6, 2023 · c7691f7 · c7691f7
1 parent db2e191
commit c7691f7
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 7 deletions.
diff --git a/JSDemos/Demos/DateRangeBox/Overview/Angular/app/app.component.html b/JSDemos/Demos/DateRangeBox/Overview/Angular/app/app.component.html
@@ -29,7 +29,7 @@
     </div>
   </div>
   <div class="dx-field">
-    <div class="dx-field-label">Single-calendar View</div>
+    <div class="dx-field-label">Single-calendar view</div>
     <div class="dx-field-value">
       <dx-date-range-box [multiView]="false"></dx-date-range-box>
     </div>
@@ -46,6 +46,13 @@
       <dx-date-range-box [min]="min" [max]="max"></dx-date-range-box>
     </div>
   </div>
+  <div class="dx-field">
+    <div class="dx-field-label">Disable out of range selection</div>
+    <div class="dx-field-value">
+      <dx-date-range-box [disableOutOfRangeSelection]="true">
+      </dx-date-range-box>
+    </div>
+  </div>
   <div class="dx-field">
     <div class="dx-field-label">Clear button</div>
     <div class="dx-field-value">

diff --git a/JSDemos/Demos/DateRangeBox/Overview/React/App.tsx b/JSDemos/Demos/DateRangeBox/Overview/React/App.tsx
@@ -66,7 +66,7 @@ export default function App() {
         </div>
       </div>
       <div className="dx-field">
-        <div className="dx-field-label">Single-calendar View</div>
+        <div className="dx-field-label">Single-calendar view</div>
         <div className="dx-field-value">
           <DateRangeBox multiView={false} />
         </div>
@@ -86,6 +86,12 @@ export default function App() {
           />
         </div>
       </div>
+      <div className="dx-field">
+        <div className="dx-field-label">Disable out of range selection</div>
+        <div className="dx-field-value">
+          <DateRangeBox disableOutOfRangeSelection={true} />
+        </div>
+      </div>
       <div className="dx-field">
         <div className="dx-field-label">Clear button</div>
         <div className="dx-field-value">

diff --git a/JSDemos/Demos/DateRangeBox/Overview/ReactJs/App.js b/JSDemos/Demos/DateRangeBox/Overview/ReactJs/App.js
@@ -56,7 +56,7 @@ export default function App() {
         </div>
       </div>
       <div className="dx-field">
-        <div className="dx-field-label">Single-calendar View</div>
+        <div className="dx-field-label">Single-calendar view</div>
         <div className="dx-field-value">
           <DateRangeBox multiView={false} />
         </div>
@@ -76,6 +76,12 @@ export default function App() {
           />
         </div>
       </div>
+      <div className="dx-field">
+        <div className="dx-field-label">Disable out of range selection</div>
+        <div className="dx-field-value">
+          <DateRangeBox disableOutOfRangeSelection={true} />
+        </div>
+      </div>
       <div className="dx-field">
         <div className="dx-field-label">Clear button</div>
         <div className="dx-field-value">

diff --git a/JSDemos/Demos/DateRangeBox/Overview/Vue/App.vue b/JSDemos/Demos/DateRangeBox/Overview/Vue/App.vue
@@ -33,7 +33,7 @@
         </div>
       </div>
       <div class="dx-field">
-        <div class="dx-field-label">Single-calendar View</div>
+        <div class="dx-field-label">Single-calendar view</div>
         <div class="dx-field-value">
           <DxDateRangeBox
             :multi-view="false"
@@ -57,6 +57,14 @@
           />
         </div>
       </div>
+      <div class="dx-field">
+        <div class="dx-field-label">Disable out of range selection</div>
+        <div class="dx-field-value">
+          <DxDateRangeBox
+            :disable-out-of-range-selection="true"
+          />
+        </div>
+      </div>
       <div class="dx-field">
         <div class="dx-field-label">Clear button</div>
         <div class="dx-field-value">

diff --git a/JSDemos/Demos/DateRangeBox/Overview/jQuery/index.html b/JSDemos/Demos/DateRangeBox/Overview/jQuery/index.html
@@ -40,7 +40,7 @@
           </div>
         </div>
         <div class="dx-field">
-          <div class="dx-field-label">Single-calendar View</div>
+          <div class="dx-field-label">Single-calendar view</div>
           <div class="dx-field-value">
             <div id="single-view"></div>
           </div>
@@ -57,6 +57,12 @@
             <div id="current-month-only"></div>
           </div>
         </div>
+        <div class="dx-field">
+          <div class="dx-field-label">Disable out of range selection</div>
+          <div class="dx-field-value">
+            <div id="disable-out-of-range-selection"></div>
+          </div>
+        </div>
         <div class="dx-field">
           <div class="dx-field-label">Clear button</div>
           <div class="dx-field-value">

diff --git a/JSDemos/Demos/DateRangeBox/Overview/jQuery/index.js b/JSDemos/Demos/DateRangeBox/Overview/jQuery/index.js
@@ -37,6 +37,10 @@ $(() => {
     value: initialValue,
   });
 
+  $('#disable-out-of-range-selection').dxDateRangeBox({
+    disableOutOfRangeSelection: true,
+  });
+
   function getCurrentMonthRange() {
     const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
 

diff --git a/MVCDemos/Views/DateRangeBox/Overview.cshtml b/MVCDemos/Views/DateRangeBox/Overview.cshtml
@@ -32,7 +32,7 @@
         </div>
     </div>
     <div class="dx-field">
-        <div class="dx-field-label">Single-calendar View</div>
+        <div class="dx-field-label">Single-calendar view</div>
         <div class="dx-field-value">
             @(Html.DevExtreme().DateRangeBox()
                 .MultiView(false)
@@ -56,6 +56,14 @@
             )
         </div>
     </div>
+    <div class="dx-field">
+        <div class="dx-field-label">Disable out of range selection</div>
+        <div class="dx-field-value">
+            @(Html.DevExtreme().DateRangeBox()
+                .DisableOutOfRangeSelection(true)
+            )
+        </div>
+    </div>
     <div class="dx-field">
         <div class="dx-field-label">Clear button</div>
         <div class="dx-field-value">

diff --git a/NetCoreDemos/Views/DateRangeBox/Overview.cshtml b/NetCoreDemos/Views/DateRangeBox/Overview.cshtml
@@ -32,7 +32,7 @@
         </div>
     </div>
     <div class="dx-field">
-        <div class="dx-field-label">Single-calendar View</div>
+        <div class="dx-field-label">Single-calendar view</div>
         <div class="dx-field-value">
             @(Html.DevExtreme().DateRangeBox()
                 .MultiView(false)
@@ -56,6 +56,14 @@
             )
         </div>
     </div>
+    <div class="dx-field">
+        <div class="dx-field-label">Disable out of range selection</div>
+        <div class="dx-field-value">
+            @(Html.DevExtreme().DateRangeBox()
+                .DisableOutOfRangeSelection(true)
+            )
+        </div>
+    </div>
     <div class="dx-field">
         <div class="dx-field-label">Clear button</div>
         <div class="dx-field-value">

diff --git a/testing/etalons/DateRangeBox-Overview.png b/testing/etalons/DateRangeBox-Overview.png