parent
05ace91e25
commit
d4135672c9
@ -1,6 +1,4 @@
|
||||
{
|
||||
"/example/js/spritemap.js": "/example/js/spritemap.js?version=f464bb8bff227fdb32109459b97ac778",
|
||||
"/example/symbol-defs.svg": "/example/symbol-defs.svg?version=a8d884258d50d4545fa128d8c1164151",
|
||||
"/example/js/example.js": "/example/js/example.js?version=cc8851cc28fbd291bb48f30f0021d2a6",
|
||||
"/example/css/styles.css": "/example/css/styles.css?version=265d430becfad1bc25c71c1ac373d0b1"
|
||||
"/example/js/example.js": "/example/js/example.js?version=9d63a267947afe1f678c244b7a63ef22",
|
||||
"/example/css/styles.css": "/example/css/styles.css?version=7ff63e2be333e7a434f8609f9510796a"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,260 +0,0 @@
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// add function for iso
|
||||
import isoWeek from 'dayjs/plugin/isoWeek'
|
||||
dayjs.extend(isoWeek)
|
||||
|
||||
// getting local data for names
|
||||
import localeData from 'dayjs/plugin/localeData'
|
||||
dayjs.extend(localeData)
|
||||
|
||||
/**
|
||||
* Mixin for extends Riot-Component
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/datepicker
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
state: {
|
||||
date: dayjs(),
|
||||
weeks: [],
|
||||
|
||||
firstDayOfMonth: false,
|
||||
firstDayOfWeek: false,
|
||||
lastDayOfMonth: false,
|
||||
|
||||
weekdaysNames: [],
|
||||
monthNames: [],
|
||||
|
||||
weekFormat: 'isoWeek',
|
||||
|
||||
isoFormat: true,
|
||||
namespace: ''
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onBeforeMount() {
|
||||
|
||||
// getting names for language
|
||||
this.state.monthNames = dayjs.months()
|
||||
this.state.weekdaysNames = dayjs.weekdaysShort()
|
||||
|
||||
// check for date prop
|
||||
if (this.props.date) {
|
||||
this.state.date = dayjs(this.props.date)
|
||||
}
|
||||
|
||||
// check for namespace
|
||||
if (this.props.namespace) {
|
||||
this.state.namespace = this.props.namespace + '.'
|
||||
}
|
||||
|
||||
// change
|
||||
if (this.props.isoFormat === 0) {
|
||||
this.state.isoFormat = false
|
||||
this.state.weekFormat = 'week'
|
||||
} else {
|
||||
this.state.weekdaysNames.push(this.state.weekdaysNames.shift())
|
||||
}
|
||||
|
||||
this.props.dispatcher.on('update', (data) => {
|
||||
this.state.date = dayjs(data.date)
|
||||
})
|
||||
|
||||
this.props.dispatcher.on('update-props', (data) => {
|
||||
this.state.date = dayjs(this.props.date)
|
||||
this.update()
|
||||
})
|
||||
|
||||
this.createWeeksAndDays()
|
||||
},
|
||||
|
||||
/**
|
||||
* create weeks and days
|
||||
*
|
||||
*
|
||||
*/
|
||||
createWeeksAndDays() {
|
||||
|
||||
this.state.weeks = []
|
||||
|
||||
// getting first day of Month
|
||||
this.state.firstDayOfMonth = this.state.date.startOf('month')
|
||||
this.state.firstDayOfWeek = this.state.firstDayOfMonth.startOf(this.state.weekFormat)
|
||||
this.state.lastDayOfMonth = this.state.date.endOf('month')
|
||||
|
||||
const lastDayOfWeek = this.state.lastDayOfMonth.endOf(this.state.weekFormat).startOf('day')
|
||||
|
||||
let day = this.state.firstDayOfWeek.clone()
|
||||
|
||||
do {
|
||||
day = this.fillWeek(day)
|
||||
} while (day.isBefore(lastDayOfWeek))
|
||||
},
|
||||
|
||||
/**
|
||||
* fill week with days
|
||||
*
|
||||
* @param {object} day
|
||||
*
|
||||
*/
|
||||
fillWeek(day) {
|
||||
|
||||
const days = []
|
||||
|
||||
days.push(day)
|
||||
|
||||
do {
|
||||
day = day.add(1, 'day')
|
||||
days.push(day)
|
||||
} while (days.length <= 6)
|
||||
|
||||
this.state.weeks.push(days)
|
||||
|
||||
// raise day for start of week
|
||||
return day.add(1, 'day')
|
||||
},
|
||||
|
||||
/**
|
||||
* select single day
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {object} day
|
||||
*
|
||||
*/
|
||||
handleSelectDay(event, day) {
|
||||
if (day.isSame(this.state.date)) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.trigger('select-day')
|
||||
|
||||
this.state.date = day
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* select month
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
handleSelectMonth(event) {
|
||||
this.state.date = this.state.date.month(event.target.value)
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('select-month')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* select year
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
handleSelectYear(event) {
|
||||
this.state.date = this.state.date.year(event.target.value)
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('select-year')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* previous month
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {object} day
|
||||
*
|
||||
*/
|
||||
handlePreviousMonth(event) {
|
||||
this.state.date = this.state.date.subtract(1, 'month')
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('previous-month')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* next month
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {object} day
|
||||
*
|
||||
*/
|
||||
handleNextMonth(event) {
|
||||
this.state.date = this.state.date.add(1, 'month')
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('next-month')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* previous year
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
handlePreviousYear(event) {
|
||||
this.state.date = this.state.date.subtract(1, 'year')
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('previous-year')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* next year
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
handleNextYear(event) {
|
||||
this.state.date = this.state.date.add(1, 'year')
|
||||
this.createWeeksAndDays()
|
||||
this.trigger('next-year')
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* trigger event & change for specific
|
||||
*
|
||||
*/
|
||||
trigger(eventName) {
|
||||
const data = {
|
||||
'date': this.state.date.clone()
|
||||
}
|
||||
|
||||
this.props.dispatcher.trigger(this.state.namespace + eventName, data)
|
||||
this.props.dispatcher.trigger(this.state.namespace + 'change', data)
|
||||
},
|
||||
|
||||
/**
|
||||
* getting classes for single day
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {array} classes
|
||||
* @return {string}
|
||||
*/
|
||||
addClassDay(day, classes) {
|
||||
|
||||
if (day.isSame(this.state.date, 'day')) {
|
||||
classes.push('tiny-datepicker__day--current')
|
||||
}
|
||||
|
||||
if (day.isBefore(this.state.firstDayOfMonth) || day.isAfter(this.state.lastDayOfMonth)) {
|
||||
classes.push('tiny-datepicker__day--not-current')
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue