mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 14:50:37 +03:00
Code Activity

Merge branch 'master' into gh-pages

Browse Source 
# Conflicts:
#	datepicker/index.vue
#	demo/App.vue
#	demo/main.js
#	dist/build.js
#	webpack.config.js
This commit is contained in:
mengxiong10
2017-08-12 18:46:06 +08:00
parent 982f56b48f dea60c9bb4
commit a61a2bd3f0
5 changed files with 103 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+11 -7
View File
@@ -39,12 +39,16 @@ export default {
``` ```
## Attributes ## Attributes
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------| |-----------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange | | range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string | | format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh) | | lang | String | zh | Translation (en/zh/es) |
| placeholder | String | | input placeholder text | | placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size | | width | String/Number | 210 | input size |
| disabledDays | Array | [] | Days in YYYY-MM-DD format to disable |
| showYearNav | Boolean | true | Show the year nav in the calendar |
| notBefore | String | '' | Disable all dates before date in YYY-MM-DD format |
| notAfter | String | '' | Disable all dates after date in YYY-MM-DD format |
datepicker/calendar-panel.vue
+40 -20
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="calendar"> <div class="calendar">
<div class="calendar-header"> <div class="calendar-header">
<a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a> <a v-show="showYearNav" class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
<a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a> <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
<a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a> <a v-show="showYearNav" class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
<a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)" >&rsaquo;</a> <a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)">&rsaquo;</a>
<a @click="showMonths">{{months[currentMonth]}}</a> <a @click="showMonths">{{months[currentMonth]}}</a>
<a @click="showYears">{{currentYear}}</a> <a @click="showYears">{{currentYear}}</a>
</div> </div>
@@ -17,10 +17,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="row in dates"> <tr v-for="row in dates">
<td v-for="cell in row" <td v-for="cell in row" :title="cell.title" :class="getClasses(cell)" @click="selectDate(cell)">{{cell.day}}</td>
:title="cell.title"
:class="getClasses(cell)"
@click="selectDate(cell)">{{cell.day}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -40,7 +37,23 @@ export default {
startAt: null, startAt: null,
endAt: null, endAt: null,
value: null, value: null,
show: Boolean show: Boolean,
disabledDays: {
type: Array,
default: function () { return [] }
},
showYearNav: {
type: Boolean,
default: true
},
notBefore: {
type: String,
default: ''
},
notAfter: {
type: String,
default: ''
}
}, },
data () { data () {
const translation = this.$parent.translation const translation = this.$parent.translation
@@ -88,7 +101,7 @@ export default {
function getCalendar (time, firstday, length, classes) { function getCalendar (time, firstday, length, classes) {
return Array.apply(null, { length }).map((v, i) => { // eslint-disable-line return Array.apply(null, { length }).map((v, i) => { // eslint-disable-line
let day = firstday + i let day = firstday + i
const date = new Date(time.getFullYear(), time.getMonth(), day) const date = new Date(time.getFullYear(), time.getMonth(), day, 0, 0, 0)
return { return {
title: date.toLocaleDateString(), title: date.toLocaleDateString(),
date, date,
@@ -131,6 +144,12 @@ export default {
classes.push(cell.classes) classes.push(cell.classes)
if (this.disabledDays.some(v => +new Date(v) === +cell.date) ||
(this.notBefore !== '' && cell.date.getTime() < (new Date(this.notBefore)).getTime()) ||
(this.notAfter !== '' && cell.date.getTime() > (new Date(this.notAfter)).getTime())) {
classes.push('disabled')
}
if (cellTime === today) { if (cellTime === today) {
classes.push('today') classes.push('today')
} }
@@ -214,7 +233,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
.calendar { .calendar {
float: left; float: left;
padding: 6px 12px; padding: 6px 12px;
@@ -240,7 +258,8 @@ export default {
font-size: 20px; font-size: 20px;
padding: 0 6px; padding: 0 6px;
} }
.calendar-header > a:hover {
.calendar-header>a:hover {
color: #1284e7; color: #1284e7;
} }
@@ -273,14 +292,14 @@ export default {
.calendar-table td.inrange, .calendar-table td.inrange,
.calendar-table td:hover, .calendar-table td:hover,
.calendar-year > a:hover, .calendar-year>a:hover,
.calendar-month > a:hover { .calendar-month>a:hover {
background-color: #eaf8fe; background-color: #eaf8fe;
} }
.calendar-table td.current, .calendar-table td.current,
.calendar-year > a.current, .calendar-year>a.current,
.calendar-month > a.current { .calendar-month>a.current {
color: #fff; color: #fff;
background-color: #1284e7; background-color: #1284e7;
} }
@@ -300,24 +319,25 @@ export default {
color: #20a0ff; color: #20a0ff;
} }
.calendar-year,.calendar-month { .calendar-year,
.calendar-month {
width: 100%; width: 100%;
height: 224px; height: 224px;
padding: 7px 0; padding: 7px 0;
text-align: center; text-align: center;
} }
.calendar-year > a {
.calendar-year>a {
display: inline-block; display: inline-block;
width: 40%; width: 40%;
margin: 1px 5%; margin: 1px 5%;
line-height: 40px; line-height: 40px;
} }
.calendar-month > a {
.calendar-month>a {
display: inline-block; display: inline-block;
width: 30%; width: 30%;
line-height: 40px; line-height: 40px;
margin: 8px 1.5%; margin: 8px 1.5%;
} }
</style> </style>
datepicker/index.vue
+41 -4
View File
@@ -20,14 +20,35 @@
ref="calendar" ref="calendar"
v-show="showPopup"> v-show="showPopup">
<template v-if="!range"> <template v-if="!range">
<calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup"></calendar-panel> <calendar-panel @select="showPopup = false"
v-model="currentValue"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"></calendar-panel>
</template> </template>
<template v-else> <template v-else>
<div class="datepicker-top"> <div class="datepicker-top">
<span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span> <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
</div> </div>
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)" v-model="currentValue[0]" :end-at="currentValue[1]" :show="showPopup"></calendar-panel> <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
<calendar-panel style="width:50%;" v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup"></calendar-panel> v-model="currentValue[0]"
:end-at="currentValue[1]"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"
></calendar-panel>
<calendar-panel style="width:50%;"
v-model="currentValue[1]"
:start-at="currentValue[0]"
:show="showPopup"
:disabledDays="disabledDays"
:showYearNav="showYearNav"
:notBefore="notBefore"
:notAfter="notAfter"></calendar-panel>
</template> </template>
</div> </div>
</div> </div>
@@ -57,7 +78,23 @@ export default {
type: String, type: String,
default: 'zh' default: 'zh'
}, },
value: null value: null,
disabledDays: {
type: Array,
default: function () { return [] }
},
showYearNav: {
type: Boolean,
default: true
},
notBefore: {
type: String,
default: ''
},
notAfter: {
type: String,
default: ''
}
}, },
data () { data () {
return { return {
datepicker/languages.js
+9
View File
@@ -16,5 +16,14 @@ export default {
'date': 'Select Date', 'date': 'Select Date',
'dateRange': 'Select Date Range' 'dateRange': 'Select Date Range'
} }
},
'es': {
'days': ['Dom', 'Lun', 'mar', 'Mie', 'Jue', 'Vie', 'Sab'],
'months': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
'pickers': ['próximos 7 días', 'próximos 30 días', '7 dás anteriores', '30 das anteriores'],
'placeholder': {
'date': 'Seleccionar fecha',
'dateRange': 'Seleccionar un rango de fechas'
}
} }
} }
package.json
+2 -2
View File
@@ -1,8 +1,8 @@
{ {
"name": "vue2-datepicker", "name": "vue2-datepicker",
"description": "A Datepicker Component For Vue2", "description": "A Datepicker Component For Vue2",
"main": "src/datepicker/index.vue", "main": "datepicker/index.vue",
"version": "1.2.0", "version": "1.2.3",
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"