Riupress UI

Appearance

PickerDateNavigation ​

A component forming the upper information and navigation beam for dates.

Props ​

template
Calendar view
type:String
default:days
values:days, months, years
month
required
Month preview
type:Number
year
required
Year preview
type:Number

Events ​

set-template
Calling the action after clicking in a month or year
move-template
Calling the action after clicking on the side navigation

Example ​

Navigation - default view for the days template
March 2023
html
<picker-date-navigation :year="state.previewYear" :month="state.previewMonth" template="days" />
ts
import { reactive } from 'vue'
const state = reactive({
  previewYear: 2023,
  previewMonth: 2
})
Navigation - default view for the template of the months
2023
html
<picker-date-navigation :year="state.previewYear" :month="state.previewMonth" template="months" />
ts
import { reactive } from 'vue'
const state = reactive({
  previewYear: 2023,
  previewMonth: 2
})
Navigation - the default view for the years template
2016 - 2027
html
<picker-date-navigation :year="state.previewYear" :month="state.previewMonth" template="years" />
ts
import { reactive } from 'vue'
const state = reactive({
  previewYear: 2023,
  previewMonth: 2
})