Skip to content

Instantly share code, notes, and snippets.

@KABBOUCHI
Forked from reinink/DateInput.vue
Created September 18, 2019 18:11
Show Gist options
  • Save KABBOUCHI/bd378545814108665f1d30c4cbb0d4db to your computer and use it in GitHub Desktop.
Save KABBOUCHI/bd378545814108665f1d30c4cbb0d4db to your computer and use it in GitHub Desktop.
Pikaday Vue Component
.date-input {
@apply .bg-white .rounded .shadow-lg .p-4 .text-xs;
z-index: 2000;
margin: 3px 0 0 0;
&.is-hidden {
@apply .hidden;
}
& .pika-title {
@apply .pb-2 .w-full .text-center;
}
& .pika-prev,
& .pika-next {
@apply .mt-2 .px-2 .text-teal-700 .cursor-pointer;
&:hover { @apply .underline; }
}
& .pika-prev {
float: left;
}
& .pika-next {
float: right;
}
& .pika-label {
@apply .inline-block;
font-size: 0;
}
& .pika-select-month,
& .pika-select-year {
@apply .inline-block .border .text-grey-900 .bg-white .text-xs .font-sans .rounded .py-1 .px-2;
appearance: none;
&:focus {
border-color: config('colors.amber-500');
box-shadow: 0 0 0 1px config('colors.amber-500');
}
}
& .pika-select-month {
@apply .mr-1;
}
& table {
@apply .w-full;
border-collapse: collapse;
& th {
@apply .font-regular .text-grey-600 .text-center .w-8 .h-8;
& abbr {
text-decoration: none;
}
}
& td {
@apply .border .border-grey-200;
& button {
@apply .block .text-grey-800 .text-center .w-8 .h-8;
&:hover { @apply .bg-grey-200; }
}
&.is-today {
@apply .bg-grey-200;
}
&.is-selected {
@apply .bg-amber-500;
& button {
@apply .text-white;
&:hover { @apply .bg-amber-600; }
}
}
}
}
}
<template>
<div>
<label v-if="label" class="form-label" :for="`date-input-${_uid}`">{{ label }}:</label>
<input v-bind="$attrs" class="form-input" :id="`date-input-${_uid}`" :class="{ error: error }" type="text" ref="input" :value="value" @change="change" @keyup="change">
<div v-if="error" class="form-error">{{ error }}</div>
</div>
</template>
<script>
import pikaday from 'pikaday'
export default {
inheritAttrs: false,
props: {
value: String,
label: String,
error: String,
format: {
type: String,
default: 'MMMM D, YYYY',
},
minYear: {
type: Number,
default: 1900,
},
maxYear: {
type: Number,
default: (new Date()).getFullYear(),
},
defaultYear: {
type: Number,
default: null,
},
defaultMonth: {
type: Number,
default: null,
},
},
mounted() {
let picker = new pikaday({
format: this.format,
reposition: false,
position: 'bottom left',
field: this.$refs.input,
yearRange: [this.minYear, this.maxYear],
theme: 'date-input',
keyboardInput: false,
i18n: {
previousMonth: 'Prev',
nextMonth: 'Next',
months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
weekdaysShort: ['Su','Mo','Tu','We','Th','Fr','Sa']
}
})
if (this.defaultYear) {
picker.gotoYear(this.defaultYear)
}
if (this.defaultMonth) {
picker.gotoMonth(this.defaultMonth - 1)
}
},
methods: {
focus() {
this.$refs.input.focus()
},
select() {
this.$refs.input.select()
},
change(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment