<style>
.ui-datepicker .md-icon {
flex: 0 0 auto;
margin-right: 8px;
width: 18px;
height: 18px;
}
</style>
<style lang="sass" scoped>
@import '../sass/common';
%cell {
flex: 0 0 auto;
width: 30px;
text-align: center;
padding: 8px 0;
}
.ui-datepicker {
position: relative;
&:focus {
outline: none;
}
}
.ui-datepicker-input {
display: flex;
align-items: center;
cursor: pointer;
padding: 4px 8px;
@include typeography-style('menu');
.selected {
flex: 0 0 85px;
}
}
.ui-datepicker-calendar {
position: absolute;
top: 100%;
left: 0;
display: inline-flex;
flex-direction: column;
padding: 8px;
background-color: colour('white');
color: colour-rgba('black', .84);
@include typeography-style('caption');
@include z-index('dropdown');
@include z-depth(1);
.heading {
display: flex;
flex-direction: row;
}
.currentMonth {
flex: 1;
text-align: center;
}
.calendar {
display: inline-flex;
flex-direction: column;
width: 210px;
}
.weekdays,
.days {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
}
.day {
height: 30px;
@extend %cell;
&.isToday {
font-weight: bolder;
}
&.isSelected {
background-color: colour-rgba('black', .14);
}
&.isPadding {
color : colour-rgba('black', .34);
}
&:hover {
cursor: pointer;
border-bottom: 5px solid colour-rgba('y', .54);
}
}
.weekday {
@extend %cell;
}
}
</style>
<template>
<div class="ui-datepicker"
@keyup.left="prev('d', true)"
@keyup.right="next('d', true)"
@keyup.up="prev('w', true)"
@keyup.down="next('w', true)"
@blur="blur"
tabindex="1">
<div class="ui-datepicker-input" @click="visible = !visible">
<md-icon name="today"></md-icon>
<div class="selected">
{{ selected.format('ddd, MMM D') }}
</div>
<button @click.stop.prevent="prev('d', true)">‹</button>
<button @click.stop.prevent="next('d', true)">›</button>
</div>
<div class="ui-datepicker-calendar" v-if="visible">
<div class="heading">
<button @click.prevent.stop="prev()">«</button>
<div class="currentMonth">{{ currentMonth }}</div>
<button @click.prevent.stop="next()">»</button>
</div>
<div class="calendar">
<div class="weekdays">
<div v-for="day in weekDays" class="weekday">
{{ day }}
</div>
</div>
<div class="days">
<div v-for="day in calendarDays"
class="day"
:class="{
isToday: isToday(day),
isSelected: isSelected(day) ,
isPadding: !isCurrentMonth(day)
}"
@click="selection(day)"
>
{{ day.format('D') }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import m from 'moment'
import DateRange from 'moment-range'
import MdIcon from '../components/md-icon.vue'
export default {
components: {
MdIcon
},
props: {
start: {
type: String,
default: m().format('YYYY-MM-DD')
},
startFormat: {
type: String,
default: 'YYYY-MM-DD'
}
},
data () {
return {
visible: false,
selected: m()
}
},
computed: {
currentMonth () {
return this.date().format('MMMM, YYYY')
},
weekDays () {
return m.weekdaysShort()
},
calendarDays () {
var start = this.date().startOf('month').startOf('week')
var end = this.date().endOf('month').endOf('week')
var range = m.range(start, end)
var days = []
range.by('days', function(moment) {
days.push(moment)
})
return days
},
},
methods: {
date () {
return m(this.start, this.startFormat)
},
next (type = 'M', select = false) {
var m = this.date().add(1, type)
this.$set('start', m.format(this.startFormat))
if( select ) this.$set('selected', m)
console.log(type, select, m.format(),this.selected.format())
},
prev (type = 'M',select = false) {
var m = this.date().subtract(1, type)
this.$set('start', m.format(this.startFormat))
if( select ) this.$set('selected', m)
},
selection (moment) {
this.$set('selected', moment)
this.$set('start', moment)
this.$set('visible', false)
document.activeElement.blur()
},
isToday (moment) {
return moment.isSame( m(), 'day' )
},
isCurrentMonth (moment) {
return moment.isSame( this.start, 'month' )
},
isSelected (moment) {
return moment.isSame( this.selected, 'day' )
},
blur () {
console.log(arguments, blur);
}
}
}
</script>
VueJS DatePicker
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.