修复日期控件初始化格式可能错误的问题

This commit is contained in:
刘祥超
2021-09-15 19:40:42 +08:00
parent 0f28df51f1
commit a8b947f5ca
2 changed files with 136 additions and 135 deletions

View File

@@ -1,150 +1,150 @@
Vue.component("datetime-input", { Vue.component("datetime-input", {
props: ["v-name", "v-timestamp"], props: ["v-name", "v-timestamp"],
mounted: function () { mounted: function () {
let that = this let that = this
teaweb.datepicker(this.$refs.dayInput, function (v) { teaweb.datepicker(this.$refs.dayInput, function (v) {
that.day = v that.day = v
that.hour = "23" that.hour = "23"
that.minute = "59" that.minute = "59"
that.second = "59" that.second = "59"
that.change() that.change()
}) })
}, },
data: function () { data: function () {
let timestamp = this.vTimestamp let timestamp = this.vTimestamp
if (timestamp != null) { if (timestamp != null) {
timestamp = parseInt(timestamp) timestamp = parseInt(timestamp)
if (isNaN(timestamp)) { if (isNaN(timestamp)) {
timestamp = 0 timestamp = 0
} }
} else { } else {
timestamp = 0 timestamp = 0
} }
let day = "" let day = ""
let hour = "" let hour = ""
let minute = "" let minute = ""
let second = "" let second = ""
if (timestamp > 0) { if (timestamp > 0) {
let date = new Date() let date = new Date()
date.setTime(timestamp * 1000) date.setTime(timestamp * 1000)
let year = date.getFullYear().toString() let year = date.getFullYear().toString()
let month = this.leadingZero((date.getMonth() + 1).toString(), 2) let month = this.leadingZero((date.getMonth() + 1).toString(), 2)
day = year + "-" + month + "-" + this.leadingZero(date.getDate().toString(), 2) day = year + "-" + month + "-" + this.leadingZero(date.getDate().toString(), 2)
hour = this.leadingZero(date.getHours().toString(), 2) hour = this.leadingZero(date.getHours().toString(), 2)
minute = this.leadingZero(date.getMinutes().toString(), 2) minute = this.leadingZero(date.getMinutes().toString(), 2)
second = this.leadingZero(date.getSeconds().toString(), 2) second = this.leadingZero(date.getSeconds().toString(), 2)
} }
return { return {
timestamp: timestamp, timestamp: timestamp,
day: day, day: day,
hour: hour, hour: hour,
minute: minute, minute: minute,
second: second, second: second,
hasDayError: false, hasDayError: false,
hasHourError: false, hasHourError: false,
hasMinuteError: false, hasMinuteError: false,
hasSecondError: false hasSecondError: false
} }
}, },
methods: { methods: {
change: function () { change: function () {
let date = new Date() let date = new Date()
// day // day
if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(this.day)) { if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(this.day)) {
this.hasDayError = true this.hasDayError = true
return return
} }
let pieces = this.day.split("-") let pieces = this.day.split("-")
let year = parseInt(pieces[0]) let year = parseInt(pieces[0])
date.setFullYear(year) date.setFullYear(year)
let month = parseInt(pieces[1]) let month = parseInt(pieces[1])
if (month < 1 || month > 12) { if (month < 1 || month > 12) {
this.hasDayError = true this.hasDayError = true
return return
} }
date.setMonth(month - 1) date.setMonth(month - 1)
let day = parseInt(pieces[2]) let day = parseInt(pieces[2])
if (day < 1 || day > 32) { if (day < 1 || day > 32) {
this.hasDayError = true this.hasDayError = true
return return
} }
date.setDate(day) date.setDate(day)
this.hasDayError = false this.hasDayError = false
// hour // hour
if (!/^\d+$/.test(this.hour)) { if (!/^\d+$/.test(this.hour)) {
this.hasHourError = true this.hasHourError = true
return return
} }
let hour = parseInt(this.hour) let hour = parseInt(this.hour)
if (isNaN(hour)) { if (isNaN(hour)) {
this.hasHourError = true this.hasHourError = true
return return
} }
if (hour < 0 || hour >= 24) { if (hour < 0 || hour >= 24) {
this.hasHourError = true this.hasHourError = true
return return
} }
this.hasHourError = false this.hasHourError = false
date.setHours(hour) date.setHours(hour)
// minute // minute
if (!/^\d+$/.test(this.minute)) { if (!/^\d+$/.test(this.minute)) {
this.hasMinuteError = true this.hasMinuteError = true
return return
} }
let minute = parseInt(this.minute) let minute = parseInt(this.minute)
if (isNaN(minute)) { if (isNaN(minute)) {
this.hasMinuteError = true this.hasMinuteError = true
return return
} }
if (minute < 0 || minute >= 60) { if (minute < 0 || minute >= 60) {
this.hasMinuteError = true this.hasMinuteError = true
return return
} }
this.hasMinuteError = false this.hasMinuteError = false
date.setMinutes(minute) date.setMinutes(minute)
// second // second
if (!/^\d+$/.test(this.second)) { if (!/^\d+$/.test(this.second)) {
this.hasSecondError = true this.hasSecondError = true
return return
} }
let second = parseInt(this.second) let second = parseInt(this.second)
if (isNaN(second)) { if (isNaN(second)) {
this.hasSecondError = true this.hasSecondError = true
return return
} }
if (second < 0 || second >= 60) { if (second < 0 || second >= 60) {
this.hasSecondError = true this.hasSecondError = true
return return
} }
this.hasSecondError = false this.hasSecondError = false
date.setSeconds(second) date.setSeconds(second)
this.timestamp = parseInt(date.getTime() / 1000) this.timestamp = Math.ceil(date.getTime() / 1000)
}, },
leadingZero: function (s, l) { leadingZero: function (s, l) {
if (l <= s.length) { if (l <= s.length) {
return s return s
} }
for (let i = 0; i < l - s.length; i++) { for (let i = 0; i < l - s.length; i++) {
s = "0" + s s = "0" + s
} }
return s return s
} }
}, },
template: `<div> template: `<div>
<input type="hidden" :name="vName" :value="timestamp"/> <input type="hidden" :name="vName" :value="timestamp"/>
<div class="ui fields inline" style="padding: 0; margin:0"> <div class="ui fields inline" style="padding: 0; margin:0">
<div class="ui field" :class="{error: hasDayError}"> <div class="ui field" :class="{error: hasDayError}">

View File

@@ -73,9 +73,10 @@ window.teaweb = {
// 加载 // 加载
if (typeof Pikaday == "undefined") { if (typeof Pikaday == "undefined") {
let that = this let that = this
this.loadJS("/js/moment.min.js") this.loadJS("/js/moment.min.js", function () {
this.loadJS("/js/pikaday.js", function () { that.loadJS("/js/pikaday.js", function () {
that.datepicker(element, callback) that.datepicker(element, callback)
})
}) })
this.loadCSS("/js/pikaday.css") this.loadCSS("/js/pikaday.css")
this.loadCSS("/js/pikaday.theme.css") this.loadCSS("/js/pikaday.theme.css")