Merge pull request #427 from LianaHarris360/kdaterange-date-formatting

Kdaterange date formatting

CHANGELOG.md

@@ -19,6 +19,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 - [#403] - Add `KOptionalText` to KDS
 - [#420] - Add `KTabs`, `KTabsList`, and `KTabsPanel`
 - [#420] - Fix randomly missing focus ring
+- [#427] - Update `KDateRange` to use `vue-intl` function `$formatDate` for date formatting and translations
 
 <!-- Referenced PRs -->
 [#425]: https://github.com/learningequality/kolibri-design-system/pull/425
@@ -33,6 +34,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 [#420]: https://github.com/learningequality/kolibri-design-system/pull/420
 [#424]: https://github.com/learningequality/kolibri-design-system/pull/424
 [#426]: https://github.com/learningequality/kolibri-design-system/pull/426
+[#427]: https://github.com/learningequality/kolibri-design-system/pull/427
 
 ## Version 1.4.x
 

docs/pages/kdaterange.vue

@@ -17,7 +17,6 @@
             cancelText="Cancel"
             title="Select a date range"
             description="(Optional) Description of modal component"
-            dateLocale="en-US"
             startDateLegendText="Start Date"
             endDateLegendText="End Date"
             previousMonthText="Previous Month"

jest.conf/setup.js

@@ -5,6 +5,7 @@ import * as AphroditeNoImportant from 'aphrodite/no-important';
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import VueIntl from 'vue-intl';
 import KThemePlugin from '../lib/KThemePlugin';
 import KContentPlugin from '../lib/content/KContentPlugin';
 
@@ -28,6 +29,7 @@ global.afterEach(() => {
 Vue.use(VueRouter);
 Vue.use(KThemePlugin);
 Vue.use(KContentPlugin);
+Vue.use(VueIntl);
 
 Vue.config.silent = true;
 Vue.config.devtools = false;

lib/KDateRange/KDateCalendar.vue

@@ -21,7 +21,7 @@
         @click="goNextMonth"
       />
       <div class="calendar-month-left">
-        <div class="months-text">
+        <div class="months-text" data-test="previousMonth">
           {{ monthString(activeMonth) + ' ' + activeYearStart }}
         </div>
         <ul v-for="weekIndex in 6" :key="weekIndex" class="calendar-days">
@@ -36,7 +36,7 @@
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
               'selected-first': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first'),
-              'selected-second': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second')
+              'selected-second': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second'),
             }]"
             @click="selectFirstItem(weekIndex, dayInWeekIndex)"
           >
@@ -49,13 +49,12 @@
               :isEndOfWeek="dayInWeekIndex === 7"
               :isStartOfWeek="dayInWeekIndex === 1"
               :activeMonth="activeMonth"
-              :dateLocale="dateLocale"
             />
           </li>
         </ul>
       </div>
       <div class="calendar-month-right">
-        <div class="months-text">
+        <div class="months-text" data-test="currentMonth">
           {{ monthString(nextActiveMonth) + ' ' + activeYearEnd }}
         </div>
         <ul v-for="weekIndex in 6" :key="weekIndex" class="calendar-days">
@@ -83,7 +82,6 @@
               :isEndOfWeek="dayInWeekIndex === 7"
               :isStartOfWeek="dayInWeekIndex === 1"
               :activeMonth="nextActiveMonth"
-              :dateLocale="dateLocale"
             />
           </li>
         </ul>
@@ -135,13 +133,6 @@
         type: [Date, null],
         default: null,
       },
-      /**
-       *  Locale string for date formatting
-       */
-      dateLocale: {
-        type: String,
-        required: true,
-      },
       /**
        *  label for previous month button
        */
@@ -389,7 +380,7 @@
       monthString(monthIndex) {
         const date = new Date();
         date.setMonth(monthIndex);
-        return date.toLocaleString(this.dateLocale, { month: 'long' });
+        return this.$formatDate(date, { month: 'long' });
       },
     },
   };

lib/KDateRange/KDateDay.vue

@@ -61,10 +61,6 @@
         type: Number,
         default: null,
       },
-      dateLocale: {
-        type: String,
-        required: true,
-      },
     },
     data() {
       return {};
@@ -109,7 +105,7 @@
       toMonthName(monthNumber) {
         const date = new Date();
         date.setMonth(monthNumber);
-        return date.toLocaleString(this.dateLocale, { month: 'long' });
+        return this.$formatDate(date, { month: 'long' });
       },
     },
   };

lib/KDateRange/KDateInput.vue

@@ -38,10 +38,6 @@
       KTextBox,
     },
     props: {
-      dateLocale: {
-        type: String,
-        required: true,
-      },
       inputRef: {
         type: String,
         default: null,
@@ -76,7 +72,7 @@
         return (
           this.legendText +
           ' ' +
-          this.valueAsDate.toLocaleDateString(this.dateLocale, {
+          this.$formatDate(this.valueAsDate, {
             year: 'numeric',
             weekday: 'long',
             month: 'long',

lib/KDateRange/__tests__/KDateRange.spec.js

@@ -1,5 +1,7 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import KDateRange from '../index';
+import KDateCalendar from '../KDateCalendar';
 import validationConstants from '../validationConstants';
 
 const DEFAULT_PROPS = {
@@ -16,13 +18,13 @@ const DEFAULT_PROPS = {
   [validationConstants.DATE_BEFORE_FIRST_ALLOWED]: 'Date must be after 01/01/2022',
 };
 
-function makeWrapper(kDateRangeProps = {}) {
+function makeKDateRangeWrapper(kDateRangeProps = {}) {
   return mount(KDateRange, {
     propsData: { ...DEFAULT_PROPS, ...kDateRangeProps },
   });
 }
 
-function getElements(wrapper) {
+function getKDateRangeElements(wrapper) {
   return {
     startDate: () => wrapper.find('[data-test="startDate"]'),
     endDate: () => wrapper.find('[data-test="endDate"]'),
@@ -33,7 +35,7 @@ function getElements(wrapper) {
 describe('KDateRange component', () => {
   let wrapper;
   beforeAll(() => {
-    wrapper = makeWrapper();
+    wrapper = makeKDateRangeWrapper();
   });
 
   it(`smoke test`, () => {
@@ -72,16 +74,62 @@ describe('KDateRange component', () => {
     const start = new Date(2022, 8, 1);
     const end = new Date(2022, 11, 1);
     await wrapper.vm.setSelectedDatesFromCalendar({ start: start, end: end });
-    const startDate = getElements(wrapper).startDate();
-    const endDate = getElements(wrapper).endDate();
+    const startDate = getKDateRangeElements(wrapper).startDate();
+    const endDate = getKDateRangeElements(wrapper).endDate();
     expect(startDate.props().value).toEqual(wrapper.vm.getDateString(start));
     expect(endDate.props().value).toEqual(wrapper.vm.getDateString(end));
   });
 
   it('on submission, the submit event should be emitted', async () => {
-    const kModal = getElements(wrapper).kModal();
+    const kModal = getKDateRangeElements(wrapper).kModal();
     kModal.vm.$emit('submit');
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().submit).toBeTruthy();
   });
 });
+
+const KDATECALENDAR_PROPS = {
+  firstAllowedDate: new Date(2022, 0, 1),
+  lastAllowedDate: new Date(),
+  selectedStartDate: new Date(2022, 8, 1),
+  selectedEndDate: new Date(),
+  previousMonthText: 'Previous Month',
+  nextMonthText: 'Next Month',
+};
+
+function makeKDateCalendarWrapper(kDateCalendarProps = {}) {
+  return mount(KDateCalendar, {
+    propsData: { ...KDATECALENDAR_PROPS, ...kDateCalendarProps },
+  });
+}
+
+function getKDateCalendarElements(wrapper) {
+  return {
+    previousMonthDisplay: () => wrapper.find('[data-test="previousMonth"]'),
+    currentMonthDisplay: () => wrapper.find('[data-test="currentMonth"]'),
+  };
+}
+
+describe('KDateCalendar component', () => {
+  let wrapper;
+  beforeAll(() => {
+    wrapper = makeKDateCalendarWrapper();
+  });
+
+  it(`smoke test`, () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('the month and year display on the left-side calendar view should contain the previous month', async () => {
+    const previousMonthDisplay = getKDateCalendarElements(wrapper).previousMonthDisplay();
+    const previousMonth = new Date().setDate(0);
+    const date = Vue.prototype.$formatDate(previousMonth, { month: 'long', year: 'numeric' });
+    expect(previousMonthDisplay.text()).toBe(date);
+  });
+
+  it('the month and year display on the right-side calendar view should contain the current month', async () => {
+    const currentMonthDisplay = getKDateCalendarElements(wrapper).currentMonthDisplay();
+    const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year: 'numeric' });
+    expect(currentMonthDisplay.text()).toBe(date);
+  });
+});

lib/KDateRange/index.vue

@@ -21,7 +21,6 @@
         <div class="left-input">
           <KDateInput
             :value="dateRange.start"
-            :dateLocale="dateLocale"
             inputRef="dateStartRangeInput"
             :errorMessage="invalidStartErrorMessage"
             :legendText="startDateLegendText"
@@ -34,7 +33,6 @@
             :value="dateRange.end"
             inputRef="dateEndRangeInput"
             :errorMessage="invalidEndErrorMessage"
-            :dateLocale="dateLocale"
             :legendText="endDateLegendText"
             data-test="endDate"
             @updateDate="debouncedSetEndDate"
@@ -47,7 +45,6 @@
           :lastAllowedDate="lastAllowedDate"
           :selectedStartDate="createDate(dateRange.start)"
           :selectedEndDate="createDate(dateRange.end)"
-          :dateLocale="dateLocale"
           :previousMonthText="previousMonthText"
           :nextMonthText="nextMonthText"
           v-bind.sync="dateRange"
@@ -140,13 +137,6 @@
         type: [String, null],
         default: null,
       },
-      /**
-       *  Locale string for language and date formatting
-       */
-      dateLocale: {
-        type: String,
-        required: true,
-      },
       /**
        *  Start date input label
        */

package.json

@@ -32,7 +32,8 @@
     "lodash": "^4.17.15",
     "popper.js": "^1.14.6",
     "purecss": "^0.6.2",
-    "tippy.js": "^4.2.1"
+    "tippy.js": "^4.2.1",
+    "vue-intl": "^3.1.0"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -65,7 +66,7 @@
     "vue-simple-markdown": "^1.1.5",
     "vue-template-compiler": "2.6.14",
     "xml-loader": "^1.2.1",
-    "date-fns":"^1.30.1"
+    "date-fns": "^1.30.1"
   },
   "resolutions": {
     "@babel/preset-env": "7.12.17",

yarn.lock

@@ -15009,6 +15009,16 @@ vue-intl@3.0.0:
     intl-messageformat "^1.3.0"
     intl-relativeformat "^1.3.0"
 
+vue-intl@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vue-intl/-/vue-intl-3.1.0.tgz#707f1f7406595c9b4afc6049254b333093be37be"
+  integrity sha512-0v3S5gspuYnt6j1G+KLfPUsNnjRdbMOcYrWYoSd1gYk6rX8VuOyh7NLztPrSIJt+NLs/qzLOZXxI1LORukEiqA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    intl-format-cache "^2.0.5"
+    intl-messageformat "^1.3.0"
+    intl-relativeformat "^1.3.0"
+
 vue-jest@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.6.0.tgz#23dc99a4dce0bb59fea3946e1317b234968cf12a"