mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-05-30 11:34:07 +03:00
Code Activity

添加time-picker-options

Browse Source
This commit is contained in:
mxie
2017-12-26 13:01:52 +08:00
parent 2f547731e5
commit ea7c150a59
7 changed files with 143 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+28 -18
View File
@@ -46,24 +46,24 @@ export default {
```
## Attributes
| Prop | Type | Default | Description |
|-------------------|---------------|-------------|---------------------------------------------------|
| type | String | 'date' | select datepicker or datetimepicker(date/datetime)|
| range | Boolean | false | if true, the type is daterange or datetimerange |
| confirm | Boolean | false | if true, need click the button to change the value|
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es/pt-br/fr/ru/de/it/cs) |
| placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size |
| disabled-days | Array | [] | Days in YYYY-MM-DD format to disable |
| not-before | String/Date | '' | Disable all dates before new Date(not-before) |
| not-after | String/Date | '' | Disable all dates after new Date(not-after) |
| shortcuts | Boolean/Array | true | the shortcuts for the range picker |
| first-day-of-week | Number | 7 | set the first day of week (1-7) |
| minute-step | Number | 0 | if > 0 don't show the second picker(0 - 60) |
| input-class | String | 'mx-input' | the input class name |
| confirm-text | String | 'OK' | the default text to display on confirm button |
| Prop | Type | Default | Description |
|---------------------|---------------|-------------|---------------------------------------------------|
| type | String | 'date' | select datepicker or datetimepicker(date/datetime)|
| range | Boolean | false | if true, the type is daterange or datetimerange |
| confirm | Boolean | false | if true, need click the button to change the value|
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es/pt-br/fr/ru/de/it/cs) |
| placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size |
| disabled-days | Array | [] | Days in YYYY-MM-DD format to disable |
| not-before | String/Date | '' | Disable all dates before new Date(not-before) |
| not-after | String/Date | '' | Disable all dates after new Date(not-after) |
| shortcuts | Boolean/Array | true | the shortcuts for the range picker |
| time-picker-options | Object | {} | set timePickerOptions(start, step, end) |
| minute-step | Number | 0 | if > 0 don't show the second picker(0 - 60) |
| first-day-of-week | Number | 7 | set the first day of week (1-7) |
| input-class | String | 'mx-input' | the input class name |
| confirm-text | String | 'OK' | the default text to display on confirm button |
## shortcuts
* true - show the default shortcuts
@@ -76,6 +76,16 @@ export default {
| start | Date | Start Date |
| end | Date | End Date |
## time-picker-options
* Object[] - custom shortcuts, [{start, step, end}]
| Prop | Type | Description |
|-----------------|---------------|------------------------|
| start | String | startTime (eg '00:00') |
| step | String | stepTime (eg '00:30') |
| end | String | endTime (eg '23:30') |
## Events
| Name | Description | Callback Arguments |
|-----------------|------------------------------|------------------------|
datepicker/calendar-panel.vue
+90 -4
View File
@@ -32,7 +32,17 @@
</div>
<div class="mx-calendar-time"
v-show="currentPanel === 'time'" >
<div class="mx-time-list-wrapper"
<div v-if="timeSelectOptions.length" class="mx-time-list-wrapper">
<ul class="mx-time-list">
<li class="mx-time-item mx-time-picker-item"
:class="getTimeClasses(item.value.hours * 60 + item.value.minutes, -1)"
@click="pickTime(item.value)"
v-for="item in timeSelectOptions">
{{item.label}}
</li>
</ul>
</div>
<div v-else class="mx-time-list-wrapper"
:style="{width: 100 / times.length + '%' }"
v-for="(time, index) in times"
:key="index">
@@ -51,11 +61,36 @@
</template>
<script>
function getTimeArray(len, step = 1) {
const getTimeArray = function (len, step = 1) {
const length = parseInt(len / step)
return Array.apply(null, { length }).map((v, i) => i * step)
}
const parseTime = function(time) {
const values = (time || '').split(':');
if (values.length >= 2) {
const hours = parseInt(values[0], 10);
const minutes = parseInt(values[1], 10);
return {
hours,
minutes
}
}
return null;
}
const formatTime = function(time, type="24") {
let hours = time.hours
hours = (type === '24') ? hours : (hours % 12 || 12)
hours = hours < 10 ? '0' + hours : hours
let minutes = time.minutes < 10 ? '0' + time.minutes : time.minutes
let result = hours + ':' + minutes
if (type === '12') {
result += time.hours >= 12 ? ' pm' : ' am'
}
return result
}
export default {
props: {
startAt: null,
@@ -86,6 +121,39 @@ export default {
const firstday = +this.$parent.firstDayOfWeek
return days.concat(days).slice(firstday, firstday + 7)
},
timeType () {
return /h+/.test(this.$parent.format) ? '12' : '24'
},
timeSelectOptions () {
const result = []
const options = this.$parent.timePickerOptions
if (!options) {
return []
}
const start = parseTime(options.start)
const end = parseTime(options.end)
const step = parseTime(options.step)
if (start && end && step) {
const startMinutes = start.minutes + start.hours * 60;
const endMinutes = end.minutes + end.hours * 60;
const stepMinutes = step.minutes + step.hours * 60
const len = Math.floor((endMinutes - startMinutes) / stepMinutes)
for (let i = 0; i <= len; i++) {
let timeMinutes = startMinutes + i * stepMinutes
let hours = Math.floor(timeMinutes/60)
let minutes = timeMinutes % 60
let value = {
hours, minutes
}
result.push({
value,
label: formatTime(value, this.timeType)
})
}
}
return result
},
currentYear() {
return this.now.getFullYear()
},
@@ -232,6 +300,10 @@ export default {
const endTime = this.endAt ? new Date(this.endAt) : 0
const classes = []
switch (index) {
case -1:
curValue = this.curHour * 60 + this.curMinute
cellTime = new Date(this.now).setHours(Math.floor(value / 60), value % 60, 0)
break
case 0:
curValue = this.curHour
cellTime = new Date(this.now).setHours(value)
@@ -369,6 +441,17 @@ export default {
this.now = date
this.$emit('input', date)
this.$emit('select')
},
pickTime (value) {
const classes = this.getTimeClasses(value.hours * 60 + value.minutes, -1)
if (classes.indexOf('disabled') !== -1) {
return
}
const date = new Date(this.now)
date.setHours(value.hours, value.minutes, 0)
this.now = date
this.$emit('input', date)
this.$emit('select')
}
}
}
@@ -481,7 +564,7 @@ export default {
.mx-time-list-wrapper {
display: inline-block;
width: 50%;
width: 100%;
height: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-left: 1px solid rgba(0, 0, 0, 0.05);
@@ -508,12 +591,15 @@ export default {
.mx-time-list-wrapper:first-child {
border-left: 0;
}
.mx-time-picker-item {
text-align: left;
padding-left: 10px;
}
.mx-time-list {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.mx-time-item {
width: 100%;
datepicker/index.vue
+15 -5
View File
@@ -103,6 +103,12 @@ export default {
default: 0,
validator: val => val >= 0 && val <= 60
},
timePickerOptions: {
type: Object,
default () {
return {}
}
},
confirm: {
type: Boolean,
default: false
@@ -215,21 +221,25 @@ export default {
this.togglePopup()
}
},
formatDate(date, fmt) {
formatDate(date, fmt = 'YYYY-MM-dd HH:mm:ss') {
const hour = date.getHours()
const map = {
'M+': date.getMonth() + 1, // 月份
'[Dd]+': date.getDate(), // 日
'[Hh]+': date.getHours(), // 小时
'H+': hour, // 小时
'h+': (hour % 12) || 12, // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
S: date.getMilliseconds(), // 毫秒
'a': hour >= 12 ? 'pm' : 'am',
'A': hour >= 12 ? 'PM' : 'AM'
}
let str = fmt.replace(/[Yy]+/g, function(str) {
let str = fmt.replace(/[Yy]+/g, function (str) {
return ('' + date.getFullYear()).slice(4 - str.length)
})
Object.keys(map).forEach(key => {
str = str.replace(new RegExp(key), function(str) {
str = str.replace(new RegExp(key), function (str) {
const value = '' + map[key]
return str.length === 1 ? value : ('00' + value).slice(value.length)
})
demo/App.vue
+7 -2
View File
@@ -18,7 +18,12 @@
</section>
<section class="demo">
<span class="label">datetime with minute-step picker:</span>
<date-picker v-model="value4" lang="en" type="datetime" format="yyyy-MM-dd HH:mm" :minute-step="10"></date-picker>
<date-picker v-model="value4" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss a"
:time-picker-options="{
start: '00:00',
step: '00:30',
end: '23:30'
}"></date-picker>
</section>
<section class="demo">
<span class="label">datetime range:</span>
@@ -83,7 +88,7 @@ export default {
value7: '',
value8: '',
demo1: '<date-picker v-model="value1" lang="en"></date-picker>\n<date-picker v-model="value3" range lang="en"></date-picker>',
demo2: '<date-picker v-model="value3" type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>\n<date-picker v-model="value4" type="datetime" format="yyyy-MM-dd HH:mm" :minute-step="10" lang="en"></date-picker>\n<date-picker v-model="value4" range type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>',
demo2: `<date-picker v-model="value3" type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>\n<date-picker v-model="value4" type="datetime" format="yyyy-MM-dd hh:mm:ss a" :time-picker-options="{start: '00:00',step: '00:30',end: '23:30'}" lang="en"></date-picker>\n<date-picker v-model="value4" range type="datetime" format="yyyy-MM-dd HH:mm:ss" lang="en"></date-picker>`,
demo3: '<date-picker v-model="value6" format="yyyy-MM-dd" lang="en" confirm></date-picker>\n<date-picker v-model="value7" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss" confirm></date-picker>\n<date-picker v-model="value8" lang="en" range format="yyyy-MM-dd" confirm></date-picker>'
}
},
dist/build.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
index.js
+1 -1
View File
@@ -4,4 +4,4 @@ DatePicker.install = function (Vue) {
Vue.component(DatePicker.name, DatePicker)
}
export default DatePicker
export default DatePicker
package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "vue2-datepicker",
"description": "A Datepicker Component For Vue2",
"main": "dist/build.js",
"version": "1.7.0",
"version": "1.8.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"