cin输入单个字符_通过单个日期选择清除日历输入

cin输入单个字符

Vue日历输入 (Vue Calendar Input)

Simple, clean calendar input with single date select, or date range selection.

简单，简洁的日历输入，带有单个日期选择或日期范围选择。

View Demo 查看演示 Download Source 下载源

安装 (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输入单个字符