public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: input date format not updating

Browse Source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-07 10:22:12 +02:00 committed by Corentin THOMASSET
parent 5ec4c26f01
commit 4801519b9f
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/routes/tools/DateConverter.vue
View File

@ -7,21 +7,19 @@
<div class="text-center"> <div class="text-center">
<v-switch v-model="useCurrentDate" label="Use current date"/> <v-switch v-model="useCurrentDate" label="Use current date"/>
</div> </div>
<v-divider></v-divider> <v-divider></v-divider>
<br> <br>
<v-row> <v-row>
<v-col md="4" sm="12" class="pt-0 pb-0"> <v-col md="4" sm="12" class="pt-0 pb-0">
<v-select <v-select
:items="formats.filter(f => !f.title.toLowerCase().includes('locale'))" :items="formats.filter(f => !f.title.toLowerCase().includes('locale')).map(v => v.title)"
item-value="dateFromFormat"
item-text="title"
outlined outlined
label="Your date format" label="Your date format"
placeholder="Input format" placeholder="Input format"
v-model="inputFormater" v-model="inputFormatterTitle"
@input="userInputChanged()" @input="userInputChanged()"
:disabled="useCurrentDate"
/> />
</v-col> </v-col>
<v-col md="8" sm="12" class="pt-0 pb-0"> <v-col md="8" sm="12" class="pt-0 pb-0">
@ -31,13 +29,14 @@
label="Your date string" label="Your date string"
@input="userInputChanged()" @input="userInputChanged()"
:error="invalidInput" :error="invalidInput"
:disabled="useCurrentDate"
/> />
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" xl="4" lg="6" md="12" > <v-col cols="12" xl="4" lg="6" md="12">
<v-card> <v-card>
<v-card-title>Dates formats</v-card-title> <v-card-title>Dates formats</v-card-title>
<v-card-text> <v-card-text>
@ -67,14 +66,14 @@
name: "DateConverter", name: "DateConverter",
created() { created() {
setInterval(this.refreshCurrentDate.bind(this), 1000); setInterval(this.refreshCurrentDate.bind(this), 1000);
this.inputFormater = this.formats[1].dateFromFormat; this.inputFormatterTitle = this.formats[1].title;
}, },
data() { data() {
const vm = this; const vm = this;
return { return {
inputString: '', inputString: '',
inputFormater: undefined, inputFormatterTitle: undefined,
useCurrentDate: true, useCurrentDate: true,
displayedDate: new Date(), displayedDate: new Date(),
invalidInput: false, invalidInput: false,
@ -84,7 +83,7 @@
getDate() { getDate() {
return vm.displayedDate.toLocaleString(); return vm.displayedDate.toLocaleString();
}, },
dateFromFormat(dateString){ dateFromFormat(dateString) {
return dateString return dateString
} }
}, },
@ -93,7 +92,7 @@
getDate() { getDate() {
return vm.displayedDate.toISOString(); return vm.displayedDate.toISOString();
}, },
dateFromFormat(dateString){ dateFromFormat(dateString) {
return new Date(dateString) return new Date(dateString)
} }
}, },
@ -102,7 +101,7 @@
getDate() { getDate() {
return vm.displayedDate.toUTCString(); return vm.displayedDate.toUTCString();
}, },
dateFromFormat(dateString){ dateFromFormat(dateString) {
return new Date(dateString) return new Date(dateString)
} }
}, },
@ -111,7 +110,7 @@
getDate() { getDate() {
return vm.displayedDate.getTime(); return vm.displayedDate.getTime();
}, },
dateFromFormat(dateString){ dateFromFormat(dateString) {
return new Date(parseInt(dateString)) return new Date(parseInt(dateString))
} }
}, },
@ -120,7 +119,7 @@
getDate() { getDate() {
return vm.displayedDate.toString(); return vm.displayedDate.toString();
}, },
dateFromFormat(dateString){ dateFromFormat(dateString) {
return new Date(dateString) return new Date(dateString)
} }
} }
@ -134,15 +133,15 @@
copyToClipboard(date); copyToClipboard(date);
this.$toast.success('Copied to clipboard.') this.$toast.success('Copied to clipboard.')
}, },
userInputChanged(){ userInputChanged() {
try{ try {
this.invalidInput = false; this.invalidInput = false;
const newDate = this.inputFormater(this.inputString); const newDate = this.formats.find(f => f.title === this.inputFormatterTitle)?.dateFromFormat(this.inputString);
if(newDate && !isNaN(newDate.getTime())){ if (newDate && !isNaN(newDate.getTime())) {
this.useCurrentDate = false; this.useCurrentDate = false;
this.displayedDate = newDate; this.displayedDate = newDate;
}else if(this.inputString.length > 0) { } else if (this.inputString.length > 0) {
this.invalidInput = true; this.invalidInput = true;
} }
} catch (ignored) { } catch (ignored) {