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>
<style lang="less">
html{
overflow-y: hidden !important;
}
.single-card {
width: 100%;
max-width: 700px !important;

146
src/components/DateConverter.vue
View File

@ -1,37 +1,58 @@
<template>
<v-row justify="center">
<v-col lg="6" md="6" sm="12" >
<v-row justify="center" align="center">
<v-col xl="4" lg="6" md="12">
<v-card class="mb-5">
<v-card-title>Input</v-card-title>
<v-card-text>
<v-switch v-model="useCurrentDate" label="Use current date"/>
</v-card-text>
</v-card>
<v-card class="mb-5">
<v-card-title>Date</v-card-title>
<v-card-text>
<v-text-field readonly outlined label="Date" :value="displayedDate.toDateString()"/>
<v-text-field readonly outlined label="Locale date" :value="displayedDate.toLocaleDateString()"/>
</v-card-text>
</v-card>
<v-card class="mb-5">
<v-card-title>Time</v-card-title>
<v-card-text>
<v-text-field readonly outlined label="Time" :value="displayedDate.toTimeString()"/>
<v-text-field readonly outlined label="Locale time" :value="displayedDate.toLocaleTimeString()"/>
<div class="text-center">
<v-switch v-model="useCurrentDate" label="Use current date"/>
</div>
<v-divider></v-divider>
<br>
<v-row>
<v-col md="6" sm="12" class="pt-0 pb-0">
<v-select
:items="formats.filter(f => !f.title.toLowerCase().includes('locale'))"
item-value="dateFromFormat"
item-text="title"
outlined
label="Your date format"
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>
</v-col>
<v-col lg="6" md="6" sm="12">
<v-card >
<v-card-title>DateTime</v-card-title>
<v-col xl="4" lg="6" md="12" >
<v-card>
<v-card-title>Dates formats</v-card-title>
<v-card-text>
<v-text-field readonly outlined label="Locale datetime" :value="displayedDate.toLocaleString()"/>
<v-text-field readonly outlined label="ISO 8601" :value="displayedDate.toISOString()"/>
<v-text-field readonly outlined label="UTC format" :value="displayedDate.toUTCString()"/>
<v-text-field readonly outlined label="UNIX Timestamp (ms)" :value="displayedDate.getTime()"/>
<v-text-field readonly outlined label="Complete" :value="displayedDate.toString()"/>
<v-text-field
dense
readonly
outlined
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>
@ -40,20 +61,93 @@
</template>
<script>
import {copyToClipboard} from "../utils/helpers";
export default {
name: "DateConverter",
created() {
setInterval(this.refreshCurrentDate.bind(this), 1000);
this.inputFormater = this.formats[1].dateFromFormat;
},
data() {
const vm = this;
return {
inputString: '',
inputFormater: undefined,
useCurrentDate: true,
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() {
if (this.useCurrentDate) {
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) {
//
}
}
}
}