diff --git a/dev/App.vue b/dev/App.vue index 351c6b5..8d17f10 100644 --- a/dev/App.vue +++ b/dev/App.vue @@ -23,7 +23,7 @@ :mode="'range'" :date-one="inputDateOne" :date-two="inputDateTwo" - :min-date="'2018-08-28'" + :min-date="new Date('2018-08-28')" :months-to-show="2" :show-action-buttons="true" :show-month-year-select="true" @@ -63,7 +63,7 @@ :mode="'range'" :date-one="buttonDateOne" :date-two="buttonDateTwo" - :min-date="'2018-04-18'" + :min-date="new Date('2018-04-18')" :fullscreen-mobile="true" :months-to-show="2" :trigger="trigger" @@ -90,8 +90,8 @@ :fullscreen-mobile="false" :date-one="inlineDateOne" :months-to-show="2" - :disabled-dates="['2018-04-30', '2018-05-10', '2018-12-14']" - :customized-dates="[{ dates: ['2019-03-21', '2019-03-22', '2019-03-23', '2019-03-24'], cssClass: 'booked' }, { dates: ['2019-03-21', '2019-03-22', '2019-03-23', '2019-04-24'], cssClass: 'not-available' }]" + :disabled-dates="[new Date('2018-04-30'), new Date('2018-05-10'), new Date('2018-12-14')]" + :customized-dates="[{ dates: [new Date('2019-03-21'), new Date('2019-03-22'), new Date('2019-03-23'), new Date('2019-03-24')], cssClass: 'booked' }, { dates: [new Date('2019-03-21'), new Date('2019-03-22'), new Date('2019-03-23'), new Date('2019-04-24')], cssClass: 'not-available' }]" @date-one-selected="val => { inlineDateOne = val }" /> @@ -149,17 +149,17 @@ import format from 'date-fns/format' export default { data() { return { - dateFormat: 'YYYY-MM-DD', //'D MMM', - inputDateOne: '', - inputDateTwo: '', - inputSingleDateOne: '', - inputSingleDateTwo: '', - buttonDateOne: '', - buttonDateTwo: '', - inlineDateOne: '', - withDisabledDatesDateOne: '', - callbackDateOne: '', - callbackDateTwo: '', + dateFormat: 'yyyy-MM-dd', //'d MMM', + inputDateOne: null, + inputDateTwo: null, + inputSingleDateOne: null, + inputSingleDateTwo: null, + buttonDateOne: null, + buttonDateTwo: null, + inlineDateOne: null, + withDisabledDatesDateOne: null, + callbackDateOne: null, + callbackDateTwo: null, sundayFirst: false, alignRight: false, showDatepickers: true, @@ -168,13 +168,13 @@ export default { }, computed: { disabledDates() { - return ['2018-12-30', '2018-12-10', '2018-12-14'] + return [new Date('2018-12-30'), new Date('2018-12-10'), new Date('2018-12-14')] }, }, created() { setTimeout(() => { - this.inputDateOne = '2019-01-12' - this.inputDateTwo = '' + this.inputDateOne = new Date('2019-01-12') + // this.inputDateTwo = '' }, 5000) }, methods: { diff --git a/docs/INSTALLATION.md b/docs/INSTALLATION.md index 5f04335..81c785a 100644 --- a/docs/INSTALLATION.md +++ b/docs/INSTALLATION.md @@ -105,7 +105,7 @@ NB: Note that you need to wrap the datepicker in a `
Type: Object | | ariaLabels | Override default aria-label texts. Current options include chooseDate, chooseStartDate, chooseEndDate, selectedDate, unavailableDate, previousMonth, nextMonth, close, openKeyboardShortcutsMenu, and openKeyboardShortcutsMenu. Labels that end in `Date` are functions which accept a date string for constructing the label text, the rest of the labels are plain strings.
Type: Object | @@ -116,7 +116,7 @@ _Example with all available options_: ```javascript Vue.use(AirBnbStyleDatepicker, { sundayFirst: false, - dateLabelFormat: 'dddd, MMMM D, YYYY', + dateLabelFormat: 'iiii, MMMM d, yyyy', days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], daysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], monthNames: [ diff --git a/docs/USAGE-WITH-CDN.md b/docs/USAGE-WITH-CDN.md index 4807159..5e03336 100644 --- a/docs/USAGE-WITH-CDN.md +++ b/docs/USAGE-WITH-CDN.md @@ -64,23 +64,23 @@ The methods used (and that you need to include in your app) are the following. N ```javascript import format from 'date-fns/format' -import subMonths from 'date-fns/sub_months' -import addMonths from 'date-fns/add_months' -import getDaysInMonth from 'date-fns/get_days_in_month' -import lastDayOfMonth from 'date-fns/last_day_of_month' -import getMonth from 'date-fns/get_month' -import setMonth from 'date-fns/set_month' -import getYear from 'date-fns/get_year' -import setYear from 'date-fns/set_year' -import isSameMonth from 'date-fns/is_same_month' -import isSameDay from 'date-fns/is_same_day' -import addDays from 'date-fns/add_days' -import subDays from 'date-fns/sub_days' -import addWeeks from 'date-fns/add_weeks' -import subWeeks from 'date-fns/sub_weeks' -import startOfWeek from 'date-fns/start_of_week' -import endOfWeek from 'date-fns/end_of_week' -import isBefore from 'date-fns/is_before' -import isAfter from 'date-fns/is_after' -import isValid from 'date-fns/is_valid' +import subMonths from 'date-fns/subMonths' +import addMonths from 'date-fns/addMonths' +import getDaysInMonth from 'date-fns/getDaysInMonth' +import lastDayOfMonth from 'date-fns/lastDayOfMonth' +import getMonth from 'date-fns/getMonth' +import setMonth from 'date-fns/setMonth' +import getYear from 'date-fns/getYear' +import setYear from 'date-fns/setYear' +import isSameMonth from 'date-fns/isSameMonth' +import isSameDay from 'date-fns/isSameDay' +import addDays from 'date-fns/addDays' +import subDays from 'date-fns/subDays' +import addWeeks from 'date-fns/addWeeks' +import subWeeks from 'date-fns/subWeeks' +import startOfWeek from 'date-fns/startOfWeek' +import endOfWeek from 'date-fns/endOfWeek' +import isBefore from 'date-fns/isBefore' +import isAfter from 'date-fns/isAfter' +import isValid from 'date-fns/isValid' ``` diff --git a/docs/examples.html b/docs/examples.html index 63a04ea..be11777 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -1,196 +1,162 @@ - - - - - Examples - - - - - - - -
-
-

Range datepicker with input

-
- - - -
-
-
-

Range datepicker with button

-
- - - -
+ + + + + Examples + + + + + + +
+
+

Range datepicker with input

+
+ + +
+
+ +
+

Range datepicker with button

+
+ -
-

Inline datepicker with input (single mode)

- - +
+
- - +
+

Inline datepicker with input (single mode)

+ +
- - + - - + toggleAlign: function () { + this.alignRight = !this.alignRight + }, + triggerDatepicker: function () { + this.trigger = !this.trigger + }, + onMonthChange: function (dates) { + console.log('months changed', dates) + }, + }, + }) + + + + \ No newline at end of file diff --git a/package.json b/package.json index b74c36f..9de980b 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "scripts": { "build": "rimraf dist/ && npm run build:main && npm run build:no-dep", "build:main": "bili --js buble --format cjs,es,umd,umd-min --plugin vue", - "build:no-dep": "bili --js buble --outDir dist/no-dep --format umd,umd-min --plugin vue --no-inline --global.date-fns/format dateFns.format --global.date-fns/sub_months dateFns.subMonths --global.date-fns/add_months dateFns.addMonths --global.date-fns/get_days_in_month dateFns.getDaysInMonth --global.date-fns/last_day_of_month dateFns.lastDayOfMonth --global.date-fns/get_month dateFns.getMonth --global.date-fns/set_month dateFns.setMonth --global.date-fns/get_year dateFns.getYear --global.date-fns/set_year dateFns.setYear --global.date-fns/is_same_month dateFns.isSameMonth --global.date-fns/is_same_day dateFns.isSameDay --global.date-fns/add_days dateFns.addDays --global.date-fns/sub_days dateFns.subDays --global.date-fns/add_weeks dateFns.addWeeks --global.date-fns/sub_weeks dateFns.subWeeks --global.date-fns/start_of_month dateFns.startOfMonth --global.date-fns/start_of_week dateFns.startOfWeek --global.date-fns/end_of_week dateFns.endOfWeek --global.date-fns/is_before dateFns.isBefore --global.date-fns/is_after dateFns.isAfter --global.date-fns/is_valid dateFns.isValid", + "build:no-dep": "bili --js buble --outDir dist/no-dep --format umd,umd-min --plugin vue --no-inline --global.date-fns/format dateFns.format --global.date-fns/subMonths dateFns.subMonths --global.date-fns/addMonths dateFns.addMonths --global.date-fns/getDaysInMonth dateFns.getDaysInMonth --global.date-fns/lastDayOfMonth dateFns.lastDayOfMonth --global.date-fns/getMonth dateFns.getMonth --global.date-fns/setMonth dateFns.setMonth --global.date-fns/getYear dateFns.getYear --global.date-fns/setYear dateFns.setYear --global.date-fns/isSameMonth dateFns.isSameMonth --global.date-fns/isSameDay dateFns.isSameDay --global.date-fns/addDays dateFns.addDays --global.date-fns/subDays dateFns.subDays --global.date-fns/addWeeks dateFns.addWeeks --global.date-fns/subWeeks dateFns.subWeeks --global.date-fns/startOfMonth dateFns.startOfMonth --global.date-fns/startOfWeek dateFns.startOfWeek --global.date-fns/endOfWeek dateFns.endOfWeek --global.date-fns/isBefore dateFns.isBefore --global.date-fns/isAfter dateFns.isAfter --global.date-fns/isValid dateFns.isValid", "dev": "poi", "test": "jest --runInBand", "test:watch": "jest --watch", @@ -30,7 +30,6 @@ "babel-preset-env": "^1.6.1", "babel-preset-stage-2": "^6.24.1", "bili": "^3.1.2", - "date-fns": "^1.29.0", "eslint": "^4.19.0", "eslint-config-prettier": "^3.0.1", "eslint-config-standard": "^11.0.0", @@ -41,7 +40,7 @@ "eslint-plugin-vue": "^4.3.0", "jest": "^22.4.3", "jest-serializer-vue": "^1.0.0", - "node-sass": "^4.9.3", + "node-sass": "^4.13.0", "poi": "^9.6.13", "poi-preset-eslint": "^9.1.1", "prettier": "^1.15.2", @@ -53,7 +52,7 @@ "vue-template-compiler": "^2.5.13" }, "peerDependencies": { - "date-fns": "1.x", + "date-fns": "2.x", "vue": "2.x" }, "jest": { @@ -80,6 +79,7 @@ } }, "dependencies": { + "date-fns": "^2.8.1", "v-click-outside": "^2.0.1" } } diff --git a/src/components/AirbnbStyleDatepicker.vue b/src/components/AirbnbStyleDatepicker.vue index becff37..0665ac2 100644 --- a/src/components/AirbnbStyleDatepicker.vue +++ b/src/components/AirbnbStyleDatepicker.vue @@ -8,36 +8,62 @@ :style="showFullscreen ? undefined : wrapperStyles" v-click-outside="handleClickOutside" > -
+

{{ mobileHeader || mobileHeaderFallback }}

-
-
@@ -48,12 +74,22 @@ :key="month" :style="[monthWidthStyles, {left: (width * index) + 'px'}]" > -
{{ day }}
+
{{ day }}
-
- +
+
{{ month.year }}
- + - +