V-inline-date, similar to Ctrip, flying pig, time selection with price

install

npm i -S v-inline-date

Source code

v-inline-date

Use

Be careful , Use v-inline-date Make sure the project is installed momentjs

// main.js
import vInlineDate from "v-inline-date"; 
import 'v-inline-date/v-inline-date/v-inline-date.css'
Vue.use(vInlineDate)

<template>
	<div>
		<v-inline-date startDate="2021-07-07"endDate="2022-07-08"></v-inline-date> 
	</div>
</template>

Set the time range of the optional rule

<v-inline-date startDate="2021-07-07" endDate="2022-07-08" ></v-inline-date>

Set the selected time

<v-inline-date startDate="2021-07-07" endDate="2022-07-08" current="2021-07-10">
</v-inline-date>

Choose a single time or a time interval

Single time

<v-inline-date startDate="2021-07-07" endDate="2022-07-08" current="2021-07-10" :dateType="0" >
</v-inline-date>

Time interval

<v-inline-date startDate="2021-07-08" endDate="2022-07-09" :current="['2021-07-09','2021-07-11']" :dateType="1" >
</v-inline-date>

<!-- Add description -->
<v-inline-date startDate="2021-07-08" endDate="2022-07-09" :current="[{date:'2021-07-09',str:' To stay in '},{date:'2021-07-11',str:' Leave '}]" :dateType="1" >
</v-inline-date>

Time tagging

<v-inline-date startDate="2021-07-07" endDate="2022-07-08" current="2021-07-19" :dateJson="dateJson" >
</v-inline-date>
<script> data(){
      return{
      dataJson:[ {
      date: '2021-07-14',price: "100",discount: " fold ",rest1: " Cease ",run: " run ",}, {
      date: '2021-07-19',rest: " Cease ",}, {
      date: '2021-07-26',fly: " fly ",} ] } } </script>

event selectDate

<v-inline-date @selectDate="selectDateEvent"></v-inline-date>
<script> methods:{
      selectDateEvent(e){
      console.log(e); // dateType by 0 When ,e:{...} // dateType by 1 When ,e:[{...},{...}] } } </script>

Be careful ,

If you use v-show Exhibition v-inline-date Words , In the open v-inline-date Called when this.$refs.selectdate.init() that will do

<div @click="openDate1">vif open </div>
<div class="picker" v-if="dateIsShow1">
	 <v-inline-date :current="current"></v-inline-date>
</div>

<div @click="openDate2">vshow open </div>
<div class="picker" v-show="dateIsShow2">
	 <v-inline-date ref="selectdate" :current="current"></v-inline-date>
</div>
<script> methods:{
      // v-if open  openDate1(){
      this.dateIsShow1 = true; }, // v-show open  openDate2(){
      this.dateIsShow1 = true; this.$refs.selectdate.init(); } } </script>

explain

attribute

Property name	describe	The default value is
startDate	The start time of the optional interval	moment().format(‘YYYY-MM-DD’) Today
endDate	The end time of the optional interval	moment().add(1,‘year’).format(‘YYYY-MM-DD’) That is, from today on, it will be pushed back for one year
dateType	0: Only one time can be selected , 1: You can choose a time interval	0
current	Currently selected time , When dateType=1 When current Is a length of 2 Array of	nothing
dateJson	Tag a date , for example ( false , Cease , fold )	nothing

event

Event name	describe	event
selectDate	The selected time	dateType by 0 When , Return an object dateType by 1 When , Returns a length of 2 Array of

example

<v-inline-date ref="selectdate" :startDate="startDate" :endDate="endDate" :current="current" :dateJson="dateJson" :dateType="dateType" @selectDate="selectDateEvent" ></v-inline-date>

<script> import vInlineDate from "@/components/v-inline-date/v-inline-date.vue"; import moment from 'moment'; export default {
      components: {
     vInlineDate}, data() {
      return {
      startDate: moment().format('YYYY-MM-DD'), //  The start time of the time range  endDate: moment().add(1,'year').format('YYYY-MM-DD'), //  The end time of the time range  dateType:0, // 0: Only one time can be selected ,1: You can choose two times , Default 0 current: '2021-07-09', //  The currently selected time  /* current: ['2021-07-08','2021-07-12'], // dateType by 1 Array is supported when  current: [ {date:'2021-07-08',str:' To stay in '}, {date:'2021-07-12',str:' Leave '}, ], // dateType by 1 Array is supported when , And the text on the date can be configured  */ dateJson:[ //  Add a symbol to a date  {
      date: moment().add(6,'day').format('YYYY-MM-DD'),price: "100",discount: " fold ",rest1: " Cease ",run: " run ",}, {
      date: moment().add(11,'day').format('YYYY-MM-DD'),rest: " Cease ",}, ] }; }, } </script>

Add words to the price , Price , Labels etc. , Pictured