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:
+55
-42
@@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user