Skip to content

Instantly share code, notes, and snippets.

@edilsoncichon
Last active April 16, 2018 12:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save edilsoncichon/3a6167b79fa2e4a45359549fda9cc2b5 to your computer and use it in GitHub Desktop.
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.
<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>
<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