mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-07 23:52:27 +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
| Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------|
| range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh) |
| placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size |
| Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es) |
| placeholder | String | | input placeholder text |
| 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>
<div class="calendar">
<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 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="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 @click="showMonths">{{months[currentMonth]}}</a>
<a @click="showYears">{{currentYear}}</a>
</div>
@@ -17,10 +17,7 @@
</thead>
<tbody>
<tr v-for="row in dates">
<td v-for="cell in row"
:title="cell.title"
:class="getClasses(cell)"
@click="selectDate(cell)">{{cell.day}}</td>
<td v-for="cell in row" :title="cell.title" :class="getClasses(cell)" @click="selectDate(cell)">{{cell.day}}</td>
</tr>
</tbody>
</table>
@@ -40,7 +37,23 @@ export default {
startAt: null,
endAt: 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 () {
const translation = this.$parent.translation
@@ -88,7 +101,7 @@ export default {
function getCalendar (time, firstday, length, classes) {
return Array.apply(null, { length }).map((v, i) => { // eslint-disable-line
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 {
title: date.toLocaleDateString(),
date,
@@ -131,6 +144,12 @@ export default {
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) {
classes.push('today')
}
@@ -214,7 +233,6 @@ export default {
</script>
<style scoped>
.calendar {
float: left;
padding: 6px 12px;
@@ -240,7 +258,8 @@ export default {
font-size: 20px;
padding: 0 6px;
}
.calendar-header > a:hover {
.calendar-header>a:hover {
color: #1284e7;
}
@@ -273,14 +292,14 @@ export default {
.calendar-table td.inrange,
.calendar-table td:hover,
.calendar-year > a:hover,
.calendar-month > a:hover {
.calendar-year>a:hover,
.calendar-month>a:hover {
background-color: #eaf8fe;
}
.calendar-table td.current,
.calendar-year > a.current,
.calendar-month > a.current {
.calendar-year>a.current,
.calendar-month>a.current {
color: #fff;
background-color: #1284e7;
}
@@ -300,24 +319,25 @@ export default {
color: #20a0ff;
}
.calendar-year,.calendar-month {
.calendar-year,
.calendar-month {
width: 100%;
height: 224px;
padding: 7px 0;
text-align: center;
}
.calendar-year > a {
.calendar-year>a {
display: inline-block;
width: 40%;
margin: 1px 5%;
line-height: 40px;
}
.calendar-month > a {
.calendar-month>a {
display: inline-block;
width: 30%;
line-height: 40px;
margin: 8px 1.5%;
}
</style>
datepicker/index.vue
+41 -4
View File
@@ -20,14 +20,35 @@
ref="calendar"
v-show="showPopup">
<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 v-else>
<div class="datepicker-top">
<span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
</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%;" v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup"></calendar-panel>
<calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
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>
</div>
</div>
@@ -57,7 +78,23 @@ export default {
type: String,
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 () {
return {
datepicker/languages.js
+9
View File
@@ -16,5 +16,14 @@ export default {
'date': 'Select Date',
'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",
"description": "A Datepicker Component For Vue2",
"main": "src/datepicker/index.vue",
"version": "1.2.0",
"main": "datepicker/index.vue",
"version": "1.2.3",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"