cin输入单个字符
Vue日历输入 (Vue Calendar Input)
Simple, clean calendar input with single date select, or date range selection.
简单,简洁的日历输入,带有单个日期选择或日期范围选择。
安装 (Installation)
yarn add v-cal-input
or
要么
npm install v-cal-input
用法 (Usage)
<template>
<div>
<h1>Selected Date: {{ date }}</h1>
<date-picker v-model="date"/>
</div>
</template>
<script>
import DatePicker from 'v-cal-input'
export default {
name: 'Demo',
components: { DatePicker },
data() {
return { date: null }
}
}
</script>
组态 (Configuration)
道具 (props)
name | default | description |
---|---|---|
value | null | the selected date(s) |
width | 350 | width of the calendar in px |
mode | 'single' | 'single' for single date, 'range' for date ranges |
panels | 1 | the number of month panels to display |
名称 | 默认 | 描述 |
---|---|---|
值 | null | 选定的日期 |
宽度 | 350 | 日历的宽度(以px |
模式 | 'single' | 'single' 表示单个日期, 'range' 表示日期范围 |
面板 | 1 | 要显示的月份面板数 |
造型 (Styling)
v-cal-input is designed to be simple to customize. Here's the entire structure of a calendar panel
v-cal-input设计为易于定制。 这是日历面板的整体结构
<ol class="calendar">
<li class="go"><!-- previous month button --></li>
<li class="month-name"></li>
<li class="go"><!-- next month button --></li>
<li class="day-name"><!-- one for each day of the week --></li>
<li class="day-pad"><!-- blank cells until the 1st of the month --></li>
<li class="day"><!-- one for each day --></li>
<li class="day-pad"><!-- blank cells to fill out the rest of the month --></li>
</ol>
The .day
class has the following additional classes added to it based on component state.
.day
类根据组件状态添加了以下其他类。
class | mode | description |
---|---|---|
today | both | represents the current date |
selected | both | currently selected |
highlighted | range | between the range of selected cells |
first | range | first selected in a range |
last | range | last selected in a range |
in-range | range | inside a selected range |
类 | 模式 | 描述 |
---|---|---|
今天 | 都 | 代表当前日期 |
已选 | 都 | 当前选择 |
突出显示 | 范围 | 在所选单元格范围之间 |
第一 | 范围 | 首先选择一个范围 |
持续 | 范围 | 最后选择范围 |
在范围内 | 范围 | 在选定范围内 |
翻译自: https://vuejsexamples.com/clean-calendar-input-with-single-date-select/
cin输入单个字符