Closes #1

- New prop : RangeHeaderText (Allow to customize input text on range)

Author: mathieustan

README.md

@@ -115,6 +115,7 @@ Using `v-model`
 | inline           | Boolean              | false            | Inline datepicker                                                                                                                                   |
 | type             | String               | 'date'           | Determines the type of the picker - date/month/quarter                                                                                              |
 | range            | Boolean              | false            | Enable/disable Date range (actually only available for date )                                                                                       |
+| rangeInputText   | String               | '%d ~ %d'        | When range is enabled, Allow to customize date text in input                                                                                        |
 | rangeHeaderText  | String               | 'From %d To %d ' | When range is enabled, set text before date in datepicker header                                                                                    |
 | rangePresets     | Array                |                  | Allow to add custom range presets to range datepicker. (Max custom presets = 6) Example: `[{ name: 'This year', dates: { start: ..., end: ... } }]` |
 | tabindex         | String\|Number       | '0'              | Specify input tabindex                                                                                                                              |

doc-src/src/App.vue

@@ -707,6 +707,7 @@
               :min-date="examples.range.min"
               :end-date="examples.range.end"
               :range-presets="examples.range.presets"
+              :range-input-text="examples.range.inputText"
               placeholder="Start - End"
               validate
               range
@@ -725,6 +726,7 @@
     <span class="token attr-name">:min-date</span>="{{ examples.range.min }}"
     <span class="token attr-name">:end-date</span>="{{ examples.range.end }}"
     <span class="token attr-name">:range-presets</span>="{{ examples.range.presets }}"
+    <span class="token attr-name">:range-input-text</span>="{{ examples.range.inputText }}"
     <span class="token attr-name">placeholder</span>="Start - End"
     <span class="token attr-name">validate </span>
     <span class="token attr-name">range </span>
@@ -902,6 +904,7 @@ export default {
         dates: undefined,
         min: '2018-02-12',
         end: '2019-08-12',
+        inputText: 'From %d to %d',
         presets: [{
           name: 'This year',
           dates: {

src/components/datepicker/DatePicker.vue

@@ -8,8 +8,9 @@
       :name="name"
       :date="value"
       :type="type"
-      :range="range"
       :format="inputFormat"
+      :range="range"
+      :range-input-text="rangeInputText"
       :locale="locale"
       :placeholder="placeholder"
       :color="color"
@@ -84,6 +85,7 @@ export default {
     type: { type: String, default: 'date' },
     // Range
     range: { type: Boolean, default: false },
+    rangeInputText: { type: String, default: '%d ~ %d' },
     rangeHeaderText: { type: String, default: 'From %d To %d' },
     rangePresets: { type: Array, default: undefined },
     // Current Value from v-model

src/components/datepicker/DatePickerCustomInput.vue

@@ -43,6 +43,7 @@ export default {
     format: { type: String },
     type: { type: String },
     range: { type: Boolean },
+    rangeInputText: { type: String },
     locale: { type: Object },
     placeholder: { type: String },
     color: { type: String },
@@ -64,8 +65,14 @@ export default {
     // Displayed Date
     dateFormatted () {
       if (!this.isDateDefined) return;
-      if (this.range) {
-        return getRangeDatesFormatted(this.date, this.locale, this.format);
+      if (this.range && this.rangeInputText) {
+        const textSplitted = this.rangeInputText.split('%d').reduce((texts, text, index) => ({
+          ...texts,
+          ...(index === 0 && { start: text.trim() }),
+          ...(index === 1 && { end: text.trim() }),
+        }), {});
+        const datesSplitted = getRangeDatesFormatted(this.date, this.locale, this.format).split(' ~ ');
+        return `${textSplitted.start} ${datesSplitted[0]} ${textSplitted.end} ${datesSplitted[1]}`.trim();
       }
       return formatDateWithLocale(this.date, this.locale, this.format);
     },

src/components/datepicker/DatePickerHeader.vue

@@ -84,13 +84,11 @@ export default {
     },
     dateFormatted () {
       if (this.range && this.rangeHeaderText) {
-        const textSplitted = this.rangeHeaderText.split('%d').reduce((texts, text, index) => {
-          return {
-            ...texts,
-            ...(index === 0 && { start: text.trim() }),
-            ...(index === 1 && { end: text.trim() }),
-          };
-        }, {});
+        const textSplitted = this.rangeHeaderText.split('%d').reduce((texts, text, index) => ({
+          ...texts,
+          ...(index === 0 && { start: text.trim() }),
+          ...(index === 1 && { end: text.trim() }),
+        }), {});
         const datesSplitted = getRangeDatesFormatted(this.mutableDate, this.locale, this.formatHeader).split(' ~ ');
         return [`${textSplitted.start} ${datesSplitted[0]}`, `${textSplitted.end} ${datesSplitted[1]}`];
       }

tests/unit/components/datepicker/DatePickerCustonInput.spec.js

@@ -9,7 +9,7 @@ describe('DatePickerCustomInput', () => {
   const dummyDate = dayjs(new Date([2019, 5, 16]));
 
   beforeEach(() => {
-    mountComponent = ({ date, range, disabled = false } = {}) =>
+    mountComponent = ({ date, range, rangeInputText = '%d ~ %d', disabled = false } = {}) =>
       shallowMount(DatePickerCustomInput, {
         propsData: {
           name: 'datepicker',
@@ -19,6 +19,7 @@ describe('DatePickerCustomInput', () => {
           color: 'color',
           disabled,
           range,
+          rangeInputText,
         },
       });
   });
@@ -83,13 +84,39 @@ describe('DatePickerCustomInput', () => {
         [{ date: dayjs('2019-4-12') }, '12 April 2019'],
         [{ date: dayjs('2019-4-12') }, '12 April 2019'],
         [
-          { range: true, date: { start: dayjs('2018-5-16'), end: undefined }, formatHeader: 'YYYY-MM-DD' },
+          {
+            range: true,
+            date: { start: dayjs('2018-5-16'), end: undefined },
+            formatHeader: 'YYYY-MM-DD',
+          },
           undefined,
         ],
         [
-          { range: true, date: { start: dayjs('2018-5-16'), end: dayjs('2019-5-16') }, formatHeader: 'YYYY~MM-DD' },
+          {
+            range: true,
+            date: { start: dayjs('2018-5-16'), end: dayjs('2019-5-16') },
+            formatHeader: 'YYYY~MM-DD',
+          },
           '16 May 2018 ~ 16 May 2019',
         ],
+        [
+          {
+            range: true,
+            rangeInputText: 'From %d to %d',
+            date: { start: dayjs('2018-5-16'), end: dayjs('2019-5-16') },
+            formatHeader: 'YYYY~MM-DD',
+          },
+          'From 16 May 2018 to 16 May 2019',
+        ],
+        [
+          {
+            range: true,
+            rangeInputText: '%d to %d',
+            date: { start: dayjs('2018-5-16'), end: dayjs('2019-5-16') },
+            formatHeader: 'YYYY~MM-DD',
+          },
+          '16 May 2018 to 16 May 2019',
+        ],
       ])('When props equal %p, should return %p', (props, expectedResult) => {
         const wrapper = mountComponent(props);
         expect(wrapper.vm.dateFormatted).toEqual(expectedResult);