Replace moment with dayjs

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 dist
 build
 coverage
+src/components/icons/*

demo/pages/index.vue

@@ -16,9 +16,8 @@
 </template>
 
 <script>
-import moment from 'moment';
-
 import { VuecRangeInput, VuecSingleInput } from '../../src';
+import date from '../../src/date';
 
 export default {
   components: {
@@ -27,8 +26,8 @@ export default {
   },
   data() {
     return {
-      now: moment(),
-      maxDate: moment().add(20, 'day'),
+      now: date(),
+      maxDate: date().add(26, 'day'),
     };
   },
 };

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "vuec",
+  "name": "@alibaba-aero/vuec",
   "version": "0.0.1",
   "description": "Vue Calendar",
   "main": "dist/vuec.cjs.min.js",
   "web": "dist/vuec.min.js",
-  "module": "es/vuec.es.js",
-  "jsnext:main": "es/vuec.es.js",
+  "module": "dist/vuec.es.js",
+  "jsnext:main": "dist/vuec.es.js",
   "license": "MIT",
   "scripts": {
     "dev": "nuxt dev demo",
@@ -14,12 +14,12 @@
     "prepublish": "npm run build"
   },
   "files": [
-    "src", 
+    "src",
     "dist"
   ],
   "dependencies": {
-    "moment": "^2.22.2",
-    "moment-jalaali": "^0.7.4"
+    "dayjs": "^1.7.5",
+    "jalaliday": "^1.1.0"
   },
   "devDependencies": {
     "bili": "^3.1.2",

src/components/core/calendar.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import moment from 'moment-jalaali';
+import idate from '../../date';
 
 import VuecMonth from './month.vue';
 import DefaultDayView from './default-day.vue';
@@ -75,7 +75,7 @@ export default {
     },
     date: {
       type: Object,
-      default: () => moment(),
+      default: () => idate(),
     },
     visibleMonths: {
       type: Number,
@@ -104,19 +104,19 @@ export default {
   },
   data() {
     return {
-      now: moment(),
+      Xdate: this.date,
       dateUnderCursor: null,
     };
   },
   computed: {
     year() {
-      return this.date.format('jYYYY');
+      return this.date.format('YYYY');
     },
     monthSelections() {
       const map = {};
 
       this.selections.forEach((item) => {
-        const month = moment(item, 'jYYYY/jMM/jDD').format('jYYYY/jMM');
+        const month = idate(item, 'YYYY/MM/DD').format('YYYY/MM');
         map[month] = map[month] || [];
         map[month].push(item);
         return map;
@@ -127,26 +127,27 @@ export default {
     months() {
       const months = [];
 
-      let date = moment(this.date);
+      let date = idate(this.Xdate);
 
       if (this.showPreviousWeeks) {
-        date.startOf('jMonth');
+        date.startOf('Month');
       }
 
-      const end = moment(this.date).add(this.visibleMonths - 1, 'jMonth').endOf('jMonth');
+      const end = idate(this.Xdate).add(this.visibleMonths - 1, 'Month').endOf('Month');
 
-      while (date <= end) {
-        const monthKey = date.format('jYYYY/jMM');
+      while (date.isBefore(end)) {
+        const monthKey = date.format('YYYY/MM');
 
         months.push({
-          title: date.format('jMMMM'),
-          date: moment(date),
+          title: date.format('MMMM'),
+          date: idate(date),
           selections: this.monthSelections[monthKey],
         });
 
-        date = date.add(1, 'jMonth').startOf('jMonth');
+        date = date.add(1, 'Month').startOf('Month');
       }
 
+      months.length = this.visibleMonths;
       return months;
     },
   },
@@ -168,12 +169,12 @@ export default {
       this.$emit('selectionChange', { date, selected });
     },
     previousPage() {
-      this.date = this.date.subtract(this.visibleMonths, 'jMonth').startOf('jMonth');
-      this.$emit('previous-page', this.date);
+      this.Xdate = this.Xdate.subtract(this.visibleMonths, 'Month').startOf('Month');
+      this.$emit('previous-page', this.Xdate);
     },
     nextPage() {
-      this.date = this.date.add(this.visibleMonths, 'jMonth').startOf('jMonth');
-      this.$emit('next-page', this.date);
+      this.Xdate = this.Xdate.add(this.visibleMonths, 'Month').startOf('Month');
+      this.$emit('next-page', this.Xdate);
     },
   },
 };

src/components/core/default-day.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { formatDate } from '../../utils';
+// import { formatDate } from '../../utils';
 
 export default {
   props: {
@@ -22,7 +22,7 @@ export default {
   },
   computed: {
     formattedDate() {
-      return formatDate(this.date, 'jD', true);
+      return this.date.format('D'); // formatDate(this.date, 'D', true);
     },
   },
 };

src/components/core/month.vue

@@ -3,7 +3,7 @@
     <div
       :show="showTitle"
       class="vuec-month-name">
-      <h2>{{ title || date.format('jMMMM') }}</h2>
+      <h2>{{ title || date.format('MMMM') }}</h2>
     </div>
     <div class="vuec-week-nav vuec-7col">
       <div
@@ -20,7 +20,7 @@
       <div class="vuec-month-days vuec-7col">
         <day-view
           v-for="(day, i) in days"
-          :key="i"
+          :key="day.dayKey"
           :index="i"
           :data="day.data"
           :date="day.date"
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import moment from 'moment-jalaali';
+import idate from '../../date';
 
 import DayView from './day.vue';
 import DefaultDayView from './default-day.vue';
@@ -97,22 +97,23 @@ export default {
   },
   computed: {
     days() {
-      const activeMonth = this.date.jMonth();
-      const monthKey = this.date.format('jYYYY/jMM');
+      const activeMonth = this.date.month();
+      const monthKey = this.date.format('YYYY/MM');
       // move to start of week if it's not
-      const date = moment(this.date).startOf('jMonth').startOf('week');
-      const end = moment(this.date).endOf('jMonth');
+      let date = idate(this.date).startOf('Month').startOf('week');
+      const end = idate(this.date).endOf('Month');
 
       const days = [];
-      while (date <= end) {
-        const dayKey = date.format('jYYYY/jMM/jDD');
+
+      while (date.isBefore(end)) {
+        const dayKey = date.format('YYYY/MM/DD');
         if ((this.minDate && date.isBefore(this.minDate, 'day'))
                     || (this.maxDate && date.isAfter(this.maxDate, 'day'))
-                    || (date.jMonth() !== activeMonth)) {
+                    || (date.month() !== activeMonth)) {
           days.push({
             disabled: true,
-            hide: date.jMonth() !== activeMonth,
-            date: moment(date),
+            hide: date.month() !== activeMonth,
+            date: idate(date),
             data: this.adapter({
               date,
               dayKey,
@@ -127,12 +128,12 @@ export default {
               dayKey,
               monthKey,
             }) || {},
-            date: moment(date),
+            date: idate(date),
             selected: this.selection.indexOf(dayKey) !== -1,
           });
         }
 
-        date.add(1, 'days');
+        date = date.add(1, 'days');
       }
 
       return days;

src/components/index.js

@@ -1,3 +1,5 @@
+export { default as idate } from '../date';
+
 // Core components
 export { default as VuecCalendar } from './core/calendar.vue';
 export { default as VuecDay } from './core/day.vue';

src/components/range-input.vue

@@ -9,7 +9,7 @@
     </div>
     <transition name="popup-animation">
       <div
-        v-show="visible"
+        v-if="visible"
         :class="{ mobile: mobile }"
         class="vuec-popup"
         @click="onClickDelegate"
@@ -26,7 +26,7 @@
             <icon-close/>
           </div>
         </div>
-        <vuec-range-select
+        <vuec-select-range
           :theme="theme"
           :value="dates"
           :min-date="minDate"
@@ -40,14 +40,13 @@
 </template>
 
 <script>
-import moment from 'moment-jalaali';
-import VuecRangeSelect from './select-range.vue';
-import { formatDate } from '../utils';
+import VuecSelectRange from './select-range.vue';
 import IconClose from './icons/close.vue';
+import idate from '../date';
 
 export default {
   components: {
-    VuecRangeSelect,
+    VuecSelectRange,
     IconClose,
   },
   props: {
@@ -93,25 +92,25 @@ export default {
     },
     format: {
       type: String,
-      default: 'jYYYY/jMM/jDD',
+      default: 'YYYY/MM/DD',
     },
   },
   data() {
-    const [fromDate = moment(), toDate = moment()] = this.value;
+    const [fromDate = idate(), toDate = idate()] = this.value;
     return {
       visible: this.open,
       temporaryDisableClickListen: false,
       fromDate,
       toDate,
       dates: [
-        typeof fromDate === 'string' ? moment(fromDate, this.format) : moment(fromDate),
-        typeof toDate === 'string' ? moment(toDate, this.format) : moment(toDate),
+        idate(fromDate),
+        idate(toDate),
       ],
     };
   },
   computed: {
     formattedDates() {
-      return this.dates.map(date => formatDate(date, this.format));
+      return this.dates.map(date => date.format(this.format));
     },
   },
   watch: {
@@ -142,8 +141,8 @@ export default {
       $event.stopPropagation();
     },
     onSelectionChange(selections) {
-      this.fromDate = moment(selections[0], 'jYYYY/jMM/jDD');
-      this.toDate = moment(selections[selections.length - 1], 'jYYYY/jMM/jDD');
+      this.fromDate = idate(selections[0]);
+      this.toDate = idate(selections[selections.length - 1]);
       this.$emit('input', [
         this.fromDate,
         this.toDate,

src/components/select-range.vue

@@ -19,7 +19,7 @@ export default {
       const map = {};
 
       this.localSelection.forEach((item) => {
-        const month = item.format('jYYYY/jMM');
+        const month = item.format('YYYY/MM');
         map[month] = map[month] || [];
         map[month].push(item);
       });

src/components/select-single.vue

@@ -19,7 +19,7 @@ export default {
       const map = {};
 
       this.localSelection.forEach((item) => {
-        const month = item.format('jYYYY/jMM');
+        const month = item.format('YYYY/MM');
         map[month] = map[month] || [];
         map[month].push(item);
       });

src/components/single-input.vue

@@ -23,9 +23,8 @@
 </template>
 
 <script>
-import moment from 'moment-jalaali';
 import VuecSingleSelect from './select-single.vue';
-import { formatDate } from '../utils';
+import idate from '../date';
 
 export default {
   components: {
@@ -69,14 +68,14 @@ export default {
     return {
       visible: this.open,
       temporaryDisableClickListen: false,
-      fromDate: moment(),
-      toDate: moment(),
+      fromDate: idate(),
+      toDate: idate(),
       dates: [],
     };
   },
   computed: {
     formattedDates() {
-      return this.dates.map(date => formatDate(date));
+      return this.dates.map(date => date.format('YYYY/MM/DD'));
     },
   },
   watch: {
@@ -107,8 +106,8 @@ export default {
       $event.stopPropagation();
     },
     onSelectionChange(selections) {
-      this.fromDate = moment(selections[0], 'jYYYY/jMM/jDD');
-      this.toDate = moment(selections[selections.length - 1], 'jYYYY/jMM/jDD');
+      this.fromDate = idate(selections[0], 'YYYY/MM/DD');
+      this.toDate = idate(selections[selections.length - 1], 'YYYY/MM/DD');
       this.$emit('input', [
         this.fromDate,
         this.toDate,

src/date.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import jalaliday from 'jalaliday';
+
+dayjs.extend(isBetween);
+dayjs.extend(jalaliday);
+
+dayjs.calendar('jalali');
+
+export { dayjs as default };