v-inline-date,类似携程,飞猪,带价格的时间选择

v-inline-date

安装
源码
使用
- 设置可选则的时间范围
- 设置已经选择的时间
- 选择单个时间还是时间区间
- - 单个时间
  - 时间区间
- 时间添加标签
- 事件selectDate
- 注意,
说明
example
- 价格上添加文字,价格,标签等,如图

安装

npm i -S v-inline-date

源码

v-inline-date

使用

注意,使用v-inline-date的时候一定要确保项目安装了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>

设置可选则的时间范围

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

设置已经选择的时间

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

选择单个时间还是时间区间

单个时间

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

时间区间

<v-inline-date startDate="2021-07-08" endDate="2022-07-09" :current="['2021-07-09','2021-07-11']":dateType="1">
</v-inline-date><!--添加描述-->
<v-inline-date startDate="2021-07-08" endDate="2022-07-09" :current="[{date:'2021-07-09',str:'入住'},{date:'2021-07-11',str:'离开'}]":dateType="1">
</v-inline-date>

时间添加标签

<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: "折",rest1: "休",run: "跑",},{ date: '2021-07-19',rest: "休",},{ date: '2021-07-26',fly: "飞",}]}
}
</script>

事件selectDate

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

注意,

如果使用v-show展示v-inline-date的话,在打开v-inline-date的时候调用this.$refs.selectdate.init()即可

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

说明

属性

属性名	描述	默认值
startDate	可选区间的开始时间	moment().format(‘YYYY-MM-DD’) 即今天
endDate	可选区间的结束时间	moment().add(1,‘year’).format(‘YYYY-MM-DD’) 即今天开始往后推一年
dateType	0:只能选一个时间, 1:可以选时间区间	0
current	当前已选的时间,当dateType=1的时候 current是一个长度为2的数组	无
dateJson	给某个日期添加标签,例如(假,休,折)	无

事件

事件名	描述	event
selectDate	选中的时间	dateType为0的时候,返回一个对象 dateType为1的时候,返回一个长度为2的数组

example

<v-inline-dateref="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'), // 时间范围的开始时间endDate: moment().add(1,'year').format('YYYY-MM-DD'), // 时间范围的结束时间dateType:0, // 0:只能选一个时间,1:可以选两个时间,默认0current: '2021-07-09', // 当前已经选择的时间/* current: ['2021-07-08','2021-07-12'],  // dateType为1的时候支持数组current: [{date:'2021-07-08',str:'入住'},{date:'2021-07-12',str:'离开'},],  // dateType为1的时候支持数组,且可以配置日期上的文字*/dateJson:[ // 给某个日期添加标{ date: moment().add(6,'day').format('YYYY-MM-DD'),price: "100",discount: "折",rest1: "休",run: "跑",},{ date: moment().add(11,'day').format('YYYY-MM-DD'),rest: "休",},]};},
}
</script>

价格上添加文字,价格,标签等,如图

v-inline-date,类似携程,飞猪,带价格的时间选择相关推荐

解析春运玄学：携程飞猪去哪儿们的抢票加速包，到底灵不灵？
作者 | 鸿键本文经授权转载自深响(ID:deep-echo) 今天,你抢票了吗? 随着春运将至,买票难这个老问题准时回归,熟悉的"火车票太难抢,需要你助我一臂之力"链接又一次集 ...
android 仿携程选择城市,类似携程商旅的城市选择器 CityPicker
软件介绍 CityPicker 这是一个类似于携程商旅类型的城市选择器特性 1.无侵入性 2.使用方便展示使用方法 1.将工程中CityPicker中的Citypicker文件夹拖入你要使用的工 ...
第1期-通过携程爬取机票价格
首先我们先找到携程机票的地址携程机票的地址为,https://flights.ctrip.com/online/list/oneway-{a}-{b}?depdate={c} 其中,a为起始地,b为 ...
来，让携程技术人带你“看”世界——2020携程技术年度盛典侧记
继2019年的上海滩年代秀之后,默默无(men)闻(sao)的携程技术人又玩出了新花样,2020要带你一起去"看"世界. 第一站:非洲卡洪鼓演奏<Lemon> 卡洪鼓 ...
携程到底有没有杀熟？
你永远不知道明天和意外哪个先来,但是机票涨价一定会来. 让用户"说走就走"的携程,又上热搜了. 你的颜值及格没?人工智能测试? https://edu.csdn.net/topic ...
携程到底有没有大数据杀熟？！
作者 | 胡巍巍出品 | CSDN(CSDNnews) 牛了,这几个案例让你迅速掌握AI技术! https://edu.csdn.net/topic/ai30?utm_source=cxrs_bw ...
团购潮冲击佣金模式携程拒三倍赔付藏消费陷阱
近日,携程网被曝光暗藏消费陷阱,用虚假承诺吸引消费者,最终违反承诺拒绝赔偿消费者3倍差价.该事件目前在网上闹得沸沸扬扬,又赶在3.15国际消费者权益日即将到来之日,携程走在了风口浪尖上,摇摇欲坠. 表 ...
携程显示连接不到服务器,携程：网络故障由员工错误操作导致
网易科技讯 5月29日讯今日凌晨1:30分,携程官方称,经携程技术排查,确认此次事件是由于员工错误操作导致.从5月28日上午11:09,发现携程官网及APP出现故障,到28日23:29全面恢复,整个 ...
怎样的内部失误使携程久久不能恢复？
支付宝才因为光纤事件一度导致应用无法使用,第二天,5月28日携程又遭遇攻击,连续两天,大型互联网公司出现不同的系统事故,"互联网+"浪潮下的安全问题再次受到行业内外拷问. 根据携程 ...

v-inline-date,类似携程,飞猪,带价格的时间选择

v-inline-date

安装

源码

使用

设置可选则的时间范围

设置已经选择的时间

选择单个时间还是时间区间

单个时间

时间区间

时间添加标签

事件selectDate

注意,

说明

example

价格上添加文字,价格,标签等,如图

v-inline-date,类似携程,飞猪,带价格的时间选择相关推荐

最新文章

热门文章