Merge pull request #7 from DevExpress-Examples/jQuery

jQuery
DevExpress-Examples · Mar 15, 2024 · 259e42a · 259e42a
2 parents a605fb8 + 067ecd9
commit 259e42a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/744047123/23.2.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1211517)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->

diff --git a/jQuery/src/data.js b/jQuery/src/data.js
@@ -21,3 +21,21 @@ const employees = [{
   Address: '807 W Paseo Del Mar',
   StateID: 5,
 }];
+
+const items = [
+  {
+    text: 'Century cuts off at 50 years',
+    value: 'javascript',
+  },
+  {
+    text: 'Century cuts off after current decade',
+    value: 'excel',
+  },
+  {
+    text: 'Century cuts off at current year',
+    value: 'past',
+  },
+  {
+    text: 'No century cut-off',
+    value: 'nocutoff',
+  }];
diff --git a/jQuery/src/index.css b/jQuery/src/index.css
@@ -3,6 +3,6 @@
     width: 90vh;
 }
 
-#grid {
-    margin-top: 50px;
+#parse-behavior, #date {
+    margin-bottom: 50px;
 }
diff --git a/jQuery/src/index.html b/jQuery/src/index.html
@@ -17,6 +17,7 @@
 
   <body class="dx-viewport">
     <div class="demo-container">
+      <div id="parse-behavior"></div>
       <div id="date"></div>
       <div id="grid"></div>
     </div>

diff --git a/jQuery/src/index.js b/jQuery/src/index.js
@@ -1,12 +1,20 @@
 $(() => {
   const now = new Date();
 
+  const parseSelectBox = $('#parse-behavior').dxSelectBox({
+    width: 300,
+    items,
+    displayExpr: 'text',
+    valueExpr: 'value',
+    value: 'javascript',
+  }).dxSelectBox('instance');
+
   $('#date').dxDateBox({
     type: 'date',
     label: 'Date with the short year',
     labelMode: 'outside',
     displayFormat: {
-      parser: (val) => parser(val),
+      parser: (val) => parser(val, parseSelectBox.option('value')),
       formatter: (val) => formatter(val),
     },
     value: now,
@@ -31,7 +39,7 @@ $(() => {
         dataType: 'date',
         editorOptions: {
           displayFormat: {
-            parser: (val) => parser(val),
+            parser: (val) => parser(val, parseSelectBox.option('value')),
             formatter: (val) => formatter(val),
           },
         },

diff --git a/jQuery/src/utils.js b/jQuery/src/utils.js
@@ -1,9 +1,34 @@
-const parser = (value) => {
+function parser(value, algorithm) {
+  const resultDate = new Date(value);
+
+  if (algorithm === 'javascript') { return resultDate; }
+
   const parts = value.split('/');
-  if (parts.length !== 3) return value;
+  if (parts.length !== 3) { return value; }
+
   let year = Number(parts[2]);
-  if (year < 100) year += 2000;
-  return new Date(year, Number(parts[0]) - 1, Number(parts[1]));
-};
+  if (year < 100) {
+    year = getFourDigitYear(year, algorithm);
+    resultDate.setFullYear(year);
+  }
+  return resultDate;
+}
+
+function getFourDigitYear(twoDigitYear, algorithm) {
+  const now = new Date();
+  const yearToday = now.getFullYear();
+  const centuryToday = yearToday - (yearToday % 100);
+  let fullYear = centuryToday + twoDigitYear;
+
+  if (algorithm === 'nocutoff') { return fullYear; }
+
+  let currentCenturyCutOff = yearToday;
+  if (algorithm === 'excel') {
+    const nextDecadeStart = yearToday - (yearToday % 10) + 10;
+    currentCenturyCutOff = nextDecadeStart - 1;
+  }
+  if (fullYear > currentCenturyCutOff) { fullYear -= 100; }
 
+  return fullYear;
+}
 const formatter = (value) => value.toLocaleDateString();