Merge pull request #11 from DevExpress-Examples/Vue

Vue

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 -->

Vue/src/components/HomeContent.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="main">
+    <DxSelectBox
+      v-model:value="selectedAlgorithm"
+      value-expr="Value"
+      display-expr="Text"
+      :items="itemsData"
+      :width="300"
+    />
     <DxDateBox
+      :width="300"
+      id="date"
       v-model="now"
       type="date"
       label="Date with the short year"
@@ -32,14 +41,18 @@ import { ref } from 'vue';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
 import DxDataGrid, { DxColumn, DxEditing } from 'devextreme-vue/data-grid';
 import DxDateBox from 'devextreme-vue/date-box';
-import { type Employee, employees } from '@/data';
+import DxSelectBox from 'devextreme-vue/select-box';
+import { type Employee, type Item, items, employees } from '@/data';
 import { formatter, parser } from '@/utils';
 
 const now = new Date();
+const selectedAlgorithm = ref('javascript');
+
 const employeesData = ref<Employee[]>(employees);
+const itemsData = ref<Item[]>(items);
 
 const format = {
-  parser: (val: string) => parser(val),
+  parser: (val: string) => parser(val, selectedAlgorithm.value),
   formatter: (val: Date) => formatter(val),
 };
 
@@ -49,7 +62,7 @@ const editorOptions = {
 
 </script>
 <style scoped>
-#grid {
+#grid, #date {
   margin-top: 50px;
 }
 

Vue/src/data.ts

@@ -16,6 +16,10 @@ export interface Employee {
     Address: string;
 }
 
+export interface Item {
+    Value: string;
+    Text: string;
+}
 export const employees: Employee[] = [{
   ID: 1,
   FirstName: 'John',
@@ -36,3 +40,20 @@ export const employees: Employee[] = [{
   Address: '807 W Paseo Del Mar',
 }];
 
+export const items: Item[] = [
+  {
+    Text: 'Century cuts off at 50 years (JavaScript)',
+    Value: 'javascript',
+  },
+  {
+    Text: 'Century cuts off after current decade (Excel)',
+    Value: 'excel',
+  },
+  {
+    Text: 'Century cuts off at current year',
+    Value: 'past',
+  },
+  {
+    Text: 'No century cut-off',
+    Value: 'nocutoff',
+  }];

Vue/src/utils.ts

@@ -1,11 +1,35 @@
-export function parser(value: string) {
+function getFourDigitYear(twoDigitYear: number, algorithm: string): number {
+  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;
+}
+export function parser(value: string, algorithm: string): Date | number {
+  const resultDate = new Date(value);
+
+  if (algorithm === 'javascript') { return resultDate; }
+
   const parts = value.split('/');
-  if (parts.length !== 3) return Date.parse(value);
+  if (parts.length !== 3) { return new Date(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;
 }
-
-export function formatter(value: number | Date) {
+export function formatter(value: number | Date): string {
   return typeof value !== 'number' ? value.toLocaleDateString() : '';
 }