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

feat: improved date converter input

Browse Source
This commit is contained in:
CorentinTh 2020-04-26 16:02:39 +02:00
parent 662b84cda0
commit 3ef90b84ca
No known key found for this signature in database
GPG Key ID: 44C26D9F091CEFC7
2 changed files with 123 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -99,6 +99,9 @@
</script> </script>
<style lang="less"> <style lang="less">
html{
overflow-y: hidden !important;
}
.single-card { .single-card {
width: 100%; width: 100%;
max-width: 700px !important; max-width: 700px !important;

144
src/components/DateConverter.vue
View File

@ -1,37 +1,58 @@
<template> <template>
<v-row justify="center"> <v-row justify="center" align="center">
<v-col lg="6" md="6" sm="12" > <v-col xl="4" lg="6" md="12">
<v-card class="mb-5"> <v-card class="mb-5">
<v-card-title>Input</v-card-title> <v-card-title>Input</v-card-title>
<v-card-text> <v-card-text>
<div class="text-center">
<v-switch v-model="useCurrentDate" label="Use current date"/> <v-switch v-model="useCurrentDate" label="Use current date"/>
</v-card-text> </div>
</v-card>
<v-card class="mb-5"> <v-divider></v-divider>
<v-card-title>Date</v-card-title> <br>
<v-card-text>
<v-text-field readonly outlined label="Date" :value="displayedDate.toDateString()"/> <v-row>
<v-text-field readonly outlined label="Locale date" :value="displayedDate.toLocaleDateString()"/> <v-col md="6" sm="12" class="pt-0 pb-0">
</v-card-text> <v-select
</v-card> :items="formats.filter(f => !f.title.toLowerCase().includes('locale'))"
<v-card class="mb-5"> item-value="dateFromFormat"
<v-card-title>Time</v-card-title> item-text="title"
<v-card-text> outlined
<v-text-field readonly outlined label="Time" :value="displayedDate.toTimeString()"/> label="Your date format"
<v-text-field readonly outlined label="Locale time" :value="displayedDate.toLocaleTimeString()"/> placeholder="Input format"
v-model="inputFormater"
@input="userInputChanged()"
/>
</v-col>
<v-col md="6" sm="12" class="pt-0 pb-0">
<v-text-field
outlined
v-model="inputString"
label="Your date string"
@input="userInputChanged()"
:error="invalidInput"
/>
</v-col>
</v-row>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col lg="6" md="6" sm="12"> <v-col xl="4" lg="6" md="12" >
<v-card > <v-card>
<v-card-title>DateTime</v-card-title> <v-card-title>Dates formats</v-card-title>
<v-card-text> <v-card-text>
<v-text-field readonly outlined label="Locale datetime" :value="displayedDate.toLocaleString()"/> <v-text-field
<v-text-field readonly outlined label="ISO 8601" :value="displayedDate.toISOString()"/> dense
<v-text-field readonly outlined label="UTC format" :value="displayedDate.toUTCString()"/> readonly
<v-text-field readonly outlined label="UNIX Timestamp (ms)" :value="displayedDate.getTime()"/> outlined
<v-text-field readonly outlined label="Complete" :value="displayedDate.toString()"/> v-for="format of formats"
v-bind:key="format.title"
:label="format.title"
:value="format.getDate()"
append-icon="fa-clipboard"
@click:append="copyDate(format.getDate())"
/>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -40,20 +61,93 @@
</template> </template>
<script> <script>
import {copyToClipboard} from "../utils/helpers";
export default { export default {
name: "DateConverter", name: "DateConverter",
created() { created() {
setInterval(this.refreshCurrentDate.bind(this), 1000); setInterval(this.refreshCurrentDate.bind(this), 1000);
this.inputFormater = this.formats[1].dateFromFormat;
}, },
data() { data() {
const vm = this;
return { return {
inputString: '',
inputFormater: undefined,
useCurrentDate: true, useCurrentDate: true,
displayedDate: new Date(), displayedDate: new Date(),
formats: ['locale'], invalidInput: false,
formats: [
{
title: 'Locale datetime',
getDate() {
return vm.displayedDate.toLocaleString();
},
dateFromFormat(dateString){
return dateString
}
},
{
title: 'ISO 8601',
getDate() {
return vm.displayedDate.toISOString();
},
dateFromFormat(dateString){
return new Date(dateString)
}
},
{
title: 'UTC format',
getDate() {
return vm.displayedDate.toUTCString();
},
dateFromFormat(dateString){
return new Date(dateString)
}
},
{
title: 'UNIX Timestamp (ms)',
getDate() {
return vm.displayedDate.getTime();
},
dateFromFormat(dateString){
return new Date(parseInt(dateString))
}
},
{
title: 'Complete',
getDate() {
return vm.displayedDate.toString();
},
dateFromFormat(dateString){
return new Date(dateString)
}
}
],
refreshCurrentDate() { refreshCurrentDate() {
if (this.useCurrentDate) { if (this.useCurrentDate) {
this.displayedDate = new Date(); this.displayedDate = new Date();
} }
},
copyDate(date) {
copyToClipboard(date);
this.$toast.success('Copied to clipboard.')
},
userInputChanged(){
try{
this.invalidInput = false;
const newDate = this.inputFormater(this.inputString);
if(newDate && !isNaN(newDate.getTime())){
this.useCurrentDate = false;
this.displayedDate = newDate;
}else if(this.inputString.length > 0) {
this.invalidInput = true;
}
} catch (ignored) {
//
}
} }
} }
} }