2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-10 17:02:26 +03:00

fix: pick minute will affect the hour (#168)

This commit is contained in:
mengxiong10
2019-03-14 09:49:22 +08:00
parent 6a990d8ba9
commit 2afed88c09
+55 -42
View File
@@ -72,7 +72,8 @@ export default {
let hours = Math.floor(timeMinutes / 60)
let minutes = timeMinutes % 60
let value = {
hours, minutes
hours,
minutes
}
result.push({
value,
@@ -82,11 +83,13 @@ export default {
}
return result
}
},
render (h) {
const date = new Date(this.value)
const disabledTime = typeof this.disabledTime === 'function' && this.disabledTime
const date = this.value
? new Date(this.value)
: new Date().setHours(0, 0, 0, 0)
const disabledTime =
typeof this.disabledTime === 'function' && this.disabledTime
let pickers = this.getTimeSelectOptions()
if (Array.isArray(pickers) && pickers.length) {
@@ -98,32 +101,39 @@ export default {
<li
class={{
'mx-time-picker-item': true,
'cell': true,
'actived': pickHours === this.currentHours && pickMinutes === this.currentMinutes,
'disabled': disabledTime && disabledTime(time)
cell: true,
actived:
pickHours === this.currentHours &&
pickMinutes === this.currentMinutes,
disabled: disabledTime && disabledTime(time)
}}
onClick={this.pickTime.bind(this, time)}>{picker.label}</li>
onClick={this.pickTime.bind(this, time)}
>
{picker.label}
</li>
)
})
return (
<div class="mx-panel mx-panel-time">
<ul class="mx-time-list">
{pickers}
</ul>
<ul class="mx-time-list">{pickers}</ul>
</div>
)
}
const hours = Array.apply(null, { length: 24 }).map((_, i) => {
const time = new Date(date).setHours(i)
return <li
class={{
'cell': true,
'actived': i === this.currentHours,
'disabled': disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>{this.stringifyText(i)}</li>
return (
<li
class={{
cell: true,
actived: i === this.currentHours,
disabled: disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>
{this.stringifyText(i)}
</li>
)
})
const step = this.minuteStep || 1
@@ -131,26 +141,34 @@ export default {
const minutes = Array.apply(null, { length }).map((_, i) => {
const value = i * step
const time = new Date(date).setMinutes(value)
return <li
class={{
'cell': true,
'actived': value === this.currentMinutes,
'disabled': disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>{this.stringifyText(value)}</li>
return (
<li
class={{
cell: true,
actived: value === this.currentMinutes,
disabled: disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>
{this.stringifyText(value)}
</li>
)
})
const seconds = Array.apply(null, { length: 60 }).map((_, i) => {
const time = new Date(date).setSeconds(i)
return <li
class={{
'cell': true,
'actived': i === this.currentSeconds,
'disabled': disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>{this.stringifyText(i)}</li>
return (
<li
class={{
cell: true,
actived: i === this.currentSeconds,
disabled: disabledTime && disabledTime(time)
}}
onClick={this.selectTime.bind(this, time)}
>
{this.stringifyText(i)}
</li>
)
})
let times = [hours, minutes]
@@ -159,16 +177,11 @@ export default {
}
times = times.map(list => (
<ul class="mx-time-list"
style={{ width: 100 / times.length + '%' }}>
<ul class="mx-time-list" style={{ width: 100 / times.length + '%' }}>
{list}
</ul>
))
return (
<div class="mx-panel mx-panel-time">
{times}
</div>
)
return <div class="mx-panel mx-panel-time">{times}</div>
}
}