diff --git a/README.md b/README.md index 363fc67b..63947a2b 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,7 @@ ![](https://travis-ci.org/charliekassel/vuejs-datepicker.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/charliekassel/vuejs-datepicker/badge.svg?branch=master)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master) -A datepicker Vue component. Compatible with Vue 2.x - -NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with 1.x you can install with `npm install vuejs-datepicker@0.9.9` - -## Demo - -Demo is broken :( -To view examples clone the repo and run `npm install && npm run dev` -https://www.webpackbin.com/bins/-KhQbtTSVuU6r8VCrIdC - not currently working. +> This repo is forked from charliekasses/vuejs-datepicker and is currently ongoing drastic API changes. Therefore this repo is considered *unstable*. ## Install diff --git a/src/Demo.vue b/src/Demo.vue index 1c3e9ac5..a05e09b3 100644 --- a/src/Demo.vue +++ b/src/Demo.vue @@ -5,212 +5,14 @@

Default datepicker

- + + + <datepicker placeholder="Select Date"></datepicker>
-
-

v-model datepicker

- - - <datepicker placeholder="Select Date" v-model="vmodelexample"></datepicker> - -
-

{{ vModelExample }}

-
- -
-

Format datepicker

- - - <datepicker :format="format"></datepicker> - -
-
Settings
-
- - -
-
-
- -
-

With minimum and maximum date range

- - - <datepicker :disabled="disabled"></datepicker> - -
-
Settings
-
- - -
-
- - -
-
- - -
- 
disabled: {{ disabled }}
- -
Resulting Date picker
- -
-
- -
-
-
Settings
-
- -
- 
-          disabled: {
-            customPredictor: function (date) {
-              // disables every day of a month which is a multiple of 3
-              if (date.getDate() % 3 === 0) {
-                return true
-              }
-            }
-          }
-
-
Resulting Date picker
- -
-
- -
-

Highlighting Dates Matching Given Function

- - - <datepicker :highlighted="highlighted"></datepicker> - -
-
Settings
- 
-          highlighted: {
-            customPredictor: function (date) {
-              // highlights every day of a month which is a multiple of 4
-              if (date.getDate() % 4 === 0) {
-                return true
-              }
-            }
-          }
-
- -
Resulting Date picker
- -
-
- -
-

Highlighting Dates

- - <datepicker :highlighted="highlighted"></datepicker> - -
-
Settings
-
- - -
-
- - -
-
- - -
- 
highlighted: {{ highlighted }}
- -
Resulting Date picker
- -
-
- -
-

Translations

-
{{ languages[language].language }} datepicker
- - - - <datepicker language="{{ language }}"></datepicker> - -
-
Settings
- -
-
- -
-

Inline datepicker

- - - <datepicker :inline="true"></datepicker> - -
-
-

RTL datepicker

- - - <datepicker language="he"></datepicker> - -
- -
-

Day view only

- - - <datepicker :minimumView="'day'" :maximumView="'day'"></datepicker> - -
- -
-

Day view only RTL

- - - <datepicker :minimumView="'day'" :maximumView="'day'" language="he"></datepicker> - -
- -
-

Month view only

- - - <datepicker :minimumView="'month'" :maximumView="'month'"></datepicker> - -
- -
-

Day and month view only

- - - <datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"></datepicker> - -
- -
-

Year and month view only

- - - <datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"></datepicker> - -
- diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 02a5caa6..be1f63da 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -1,103 +1,78 @@ @@ -122,20 +97,18 @@ export default { type: String, default: 'en' }, + multiSelect: Boolean, fullMonthName: Boolean, disabled: Object, highlighted: Object, - placeholder: String, inline: Boolean, calendarClass: [String, Object], - inputClass: [String, Object], wrapperClass: [String, Object], mondayFirst: Boolean, clearButton: Boolean, clearButtonIcon: String, calendarButton: Boolean, calendarButtonIcon: String, - bootstrapStyling: Boolean, initialView: String, disabledPicker: Boolean, required: Boolean, @@ -161,6 +134,12 @@ export default { * {Date} */ selectedDate: null, + /* + * Selected Date End + * The end date in a multiselect daterange. + * {Date} + */ + selectedDateEnd: null, /* * Flags to show calendar views * {Boolean} @@ -171,7 +150,11 @@ export default { /* * Positioning */ - calendarHeight: 0 + calendarHeight: 0, + /* + * Determines if a multiselect range was already picked, to allow a repick. + */ + alreadyPicked: false } }, watch: { @@ -399,8 +382,17 @@ export default { this.$emit('selected', new Date(date)) this.$emit('input', new Date(date)) }, + setDateNew (key, timestamp) { + const date = new Date(timestamp) + this[key] = new Date(date) + this.setPageDate(date) + if (this.multiSelect && this.selectedDateEnd) { + this.$emit('selected', {start: this.selectedDate, end: this.selectedDateEnd}) + } + }, clearDate () { this.selectedDate = null + this.selectedDateEnd = null this.$emit('selected', null) this.$emit('input', null) this.$emit('cleared') @@ -413,12 +405,22 @@ export default { this.$emit('selectedDisabled', day) return false } - this.setDate(day.timestamp) if (this.isInline) { - this.showDayCalendar() - } else { - this.close() + this.setDate(day.timestamp) + return this.showDayCalendar() + } + if (this.multiSelect && (!this.selectedDate || this.alreadyPicked)) { + this.alreadyPicked = false + if (this.selectedDateEnd) this.selectedDateEnd = null + return this.setDateNew('selectedDate', day.timestamp) } + if (this.multiSelect && this.selectedDate) { + this.setDateNew('selectedDateEnd', day.timestamp) + this.alreadyPicked = true + return this.close() + } + this.setDate(day.timestamp) + this.close() }, /** * @param {Object} month @@ -569,7 +571,9 @@ export default { * @return {Boolean} */ isSelectedDate (dObj) { - return this.selectedDate && this.selectedDate.toDateString() === dObj.toDateString() + return this.selectedDate && this.selectedDate.toDateString() === dObj.toDateString() || + this.selectedDateEnd && this.selectedDateEnd.toDateString() === dObj.toDateString() || + (dObj > this.selectedDate && dObj < this.selectedDateEnd) }, /** * Whether a day is disabled @@ -825,6 +829,9 @@ export default { if (this.isInline) { this.setInitialView() } + this.$el.childNodes[0].addEventListener('click', e => { + this.showCalendar() + }) } }, mounted () {