Skip to content

Instantly share code, notes, and snippets.

@odirleiborgert
Forked from edilsoncichon/InputDate.vue
Created April 16, 2018 12:21
Show Gist options
  • Save odirleiborgert/4904cdb89bb8f24c4a5f2bbeca79b537 to your computer and use it in GitHub Desktop.
Save odirleiborgert/4904cdb89bb8f24c4a5f2bbeca79b537 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