feat: remove moment-jalaali

Author: farnabaz

.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

@@ -4,8 +4,8 @@
   "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",
@@ -19,8 +19,7 @@
   ],
   "dependencies": {
     "dayjs": "^1.7.5",
-    "moment": "^2.22.2",
-    "moment-jalaali": "^0.7.4"
+    "jalaliday": "^1.1.0"
   },
   "devDependencies": {
     "bili": "^3.1.2",

src/components/core/calendar.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { idate } from '../../date';
+import idate from '../../date';
 
 import VuecMonth from './month.vue';
 import DefaultDayView from './default-day.vue';
@@ -104,7 +104,7 @@ export default {
   },
   data() {
     return {
-      now: idate(),
+      Xdate: this.date,
       dateUnderCursor: null,
     };
   },
@@ -127,13 +127,13 @@ export default {
     months() {
       const months = [];
 
-      let date = idate(this.date);
+      let date = idate(this.Xdate);
 
       if (this.showPreviousWeeks) {
         date.startOf('Month');
       }
 
-      const end = idate(this.date).add(this.visibleMonths - 1, 'Month').endOf('Month');
+      const end = idate(this.Xdate).add(this.visibleMonths - 1, 'Month').endOf('Month');
 
       while (date.isBefore(end)) {
         const monthKey = date.format('YYYY/MM');
@@ -147,6 +147,7 @@ export default {
         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, 'Month').startOf('Month');
-      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, 'Month').startOf('Month');
-      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/month.vue

@@ -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 { idate } from '../../date';
+import idate from '../../date';
 
 import DayView from './day.vue';
 import DefaultDayView from './default-day.vue';
@@ -104,6 +104,7 @@ export default {
       const end = idate(this.date).endOf('Month');
 
       const days = [];
+
       while (date.isBefore(end)) {
         const dayKey = date.format('YYYY/MM/DD');
         if ((this.minDate && date.isBefore(this.minDate, 'day'))

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"
@@ -41,9 +41,8 @@
 
 <script>
 import VuecSelectRange from './select-range.vue';
-import { formatDate } from '../utils';
 import IconClose from './icons/close.vue';
-import { idate } from '../date';
+import idate from '../date';
 
 export default {
   components: {
@@ -93,7 +92,7 @@ export default {
     },
     format: {
       type: String,
-      default: 'jYYYY/jMM/jDD',
+      default: 'YYYY/MM/DD',
     },
   },
   data() {
@@ -104,14 +103,14 @@ export default {
       fromDate,
       toDate,
       dates: [
-        typeof fromDate === 'string' ? idate(fromDate, this.format) : idate(fromDate),
-        typeof toDate === 'string' ? idate(toDate, this.format) : idate(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 = idate(selections[0], 'jYYYY/jMM/jDD');
-      this.toDate = idate(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/single-input.vue

@@ -24,8 +24,7 @@
 
 <script>
 import VuecSingleSelect from './select-single.vue';
-import { formatDate } from '../utils';
-import { idate } from '../date';
+import idate from '../date';
 
 export default {
   components: {
@@ -76,7 +75,7 @@ export default {
   },
   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 = idate(selections[0], 'jYYYY/jMM/jDD');
-      this.toDate = idate(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

@@ -1,14 +1,10 @@
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
-import 'dayjs/locale/fa';
+import jalaliday from 'jalaliday';
 
 dayjs.extend(isBetween);
-dayjs.locale('fa');
+dayjs.extend(jalaliday);
 
-export { dayjs as default };
-
-export const idate = dayjs;
+dayjs.calendar('jalali');
 
-export const setLocale = (locale) => {
-  dayjs.locale(locale);
-};
+export { dayjs as default };

src/utils.js

@@ -1,9 +1,3 @@
-import moment from 'moment-jalaali';
-
-moment.loadPersian({
-  dialect: 'persian-modern',
-});
-
 /**
  * Persian numeric characters
  */
@@ -48,33 +42,6 @@ export function toEnglishDigits(value) {
     .replace(/[٠-٩]/g, w => w.charCodeAt(0) - ARABIC_ZERO_CHAR_CODE);
 }
 
-function getFormat(format) {
-  switch (format) {
-    case 'jalaliDateTime':
-      // This filter returns a Jalali date time format like : 12:31 1396/11/4
-      return 'HH:mm jYYYY/jM/jD';
-    case 'jalaliDate':
-      // This filter returns a Jalali date in the following format : 1396/11/4
-      return 'jYYYY/jM/jD';
-    default:
-      return format;
-  }
-}
-
-export function formatDate(date, format = 'jalaliDate', toPersian = true) {
-  let formattedDate = '';
-
-  if (date) {
-    formattedDate = moment(date).format(getFormat(format));
-  }
-
-  if (toPersian) {
-    formattedDate = toPersianDigits(formattedDate);
-  }
-
-  return formattedDate;
-}
-
 export function weekDays() {
   return [
     'شنبه',

yarn.lock

@@ -3204,7 +3204,7 @@ date-time@^2.1.0:
   dependencies:
     time-zone "^1.0.0"
 
-dayjs@^1.7.5:
+dayjs@^1.6.3, dayjs@^1.7.5:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.7.5.tgz#14715cb565d1f8cb556a8531cb14bf1fc33067cc"
 
@@ -5173,9 +5173,11 @@ istanbul-reports@^1.4.1:
   dependencies:
     handlebars "^4.0.11"
 
-jalaali-js@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/jalaali-js/-/jalaali-js-1.1.0.tgz#f0e942049273d11f7298a992356fc36ce2784863"
+jalaliday@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jalaliday/-/jalaliday-1.0.0.tgz#8e757dbdb626700e0ad9213a3fb9870c1e182386"
+  dependencies:
+    dayjs "^1.6.3"
 
 jest-changed-files@^23.4.2:
   version "23.4.2"
@@ -6141,18 +6143,6 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-moment-jalaali@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/moment-jalaali/-/moment-jalaali-0.7.4.tgz#6878971d77c41d49270e61c18c7cb1e5d84528ee"
-  dependencies:
-    jalaali-js "^1.1.0"
-    moment "^2.22.1"
-    rimraf "^2.6.2"
-
-moment@^2.22.1, moment@^2.22.2:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"