Last active
April 16, 2018 12:21
-
-
Save edilsoncichon/3a6167b79fa2e4a45359549fda9cc2b5 to your computer and use it in GitHub Desktop.
Vue JS component for the user to enter the date. Day, month and year are separated into inputs, to avoid problems with browser compatibility.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<input-date id="date" :defaultDate="expectedDateDevolution"/> | |
</template> | |
<script> | |
import InputDate from 'path/to/file/InputDate' | |
export default { | |
name: 'Example', | |
components: { InputDate }, | |
data () { | |
return { | |
expectedDateDevolution: new Date() | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<select v-model="day" :name="idDay" :id="idDay" :disabled="disabled"> | |
<option value="">day</option> | |
<option v-for="n in 31" :value="n">{{ n++ }}</option> | |
</select> | |
<select v-model="month" :name="idMonth" :id="idMonth" :disabled="disabled"> | |
<option value="">month</option> | |
<option v-for="(month, key) in months" :value="key+1">{{ month }}</option> | |
</select> | |
<select v-model="year" :name="idYear" :id="idYear" :disabled="disabled"> | |
<option value="">year</option> | |
<option v-for="year in years" :value="year">{{ year }}</option> | |
</select> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'InputDate', | |
props: [ | |
'id', | |
'defaultDate', | |
'disabled' | |
], | |
computed: { | |
idDay: function () { | |
return this.id + '_day' | |
}, | |
idMonth: function () { | |
return this.id + '_month' | |
}, | |
idYear: function () { | |
return this.id + '_year' | |
}, | |
years: function () { | |
return Array(201).fill(2100).map((x, y) => x - y) | |
}, | |
months: function () { | |
return [ 'jan', 'fev', 'mar', 'abr', 'mai', 'jun', | |
'jul', 'ago', 'set', 'out', 'nov', 'dez'] | |
}, | |
day: function () { | |
return this.defaultDate | |
? this.defaultDate.getDate() | |
: '' | |
}, | |
month: function () { | |
return this.defaultDate | |
? this.defaultDate.getMonth() | |
: '' | |
}, | |
year: function () { | |
return this.defaultDate | |
? this.defaultDate.getFullYear() | |
: '' | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment