小程序旅游日期选择日历

旅游模板日期选择

// pages/logs/travel.js

JS部分 trag_daystr为数据可根据自己需求改变

var trag_daystr = [

{ date: "2018-09-21", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-22", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-23", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-24", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-25", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-26", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-27", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-28", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-29", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-09-30", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-01", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-02", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-03", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-04", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-05", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-06", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-07", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-08", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-09", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-10", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-11", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-12", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-13", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-14", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-15", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-16", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-17", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-18", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-19", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-20", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-21", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-22", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-23", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-24", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-25", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" },

{ date: "2018-10-26", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-27", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-28", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-29", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-30", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-10-31", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-01", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-02", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-03", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-04", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-05", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-06", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-07", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-08", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-09", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-10", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-11", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-12", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-13", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-14", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-15", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-16", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-17", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-18", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-19", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-20", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-21", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-22", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-23", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-24", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-25", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-26", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-27", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-28", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-29", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }

{ date: "2018-11-30", dc_id: "", adultprice: "0.01", childprice: "0.02", numberlimit: "999999" }];

function unique(data) {

data = data || [];

var a = {};

for (var i = 0; i < data.length; i++) {

var v = data[i];

if (typeof (a[v]) == 'undefined') {

a[v] = 1;

}

};

data.length = 0;

for (var i in a) {

data[data.length] = i;

}

return data;

}

function evlabc(a) {//排序大小

var i = 0, j = 0, t = 0;

for (i = 0; i < a.length; i++) {

for (j = 0; j < a.length; j++) {

if (a[i] < a[j]) {

t = a[i];

a[i] = a[j];

a[j] = t;

}

return a;

}

Page({

/**

* 页面的初始数据

data: {

currentObj: '',

currentDay: '',

morenrq: '09',

currentDayList:[],

trag_daystr:[],

//日期初始化选中样式

selectCSS: 'bk-color-day',

m: '', riqi: true, dateCre: 0,

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

console.log(trag_daystr)

var currentObj = this.getCurrentDayString()

console.log(currentObj)

this.setData({

currentDate: currentObj.getFullYear() + '/' + (currentObj.getMonth() + 1) + '/' + currentObj.getDate(),

currentDay: currentObj.getDate(),

currentDays: currentObj.getDate(),

currentObj: currentObj,

/* 获取当前的年、月 */

currentYear: currentObj.getFullYear(),

m: (currentObj.getMonth() + 1),

currentMonth: (currentObj.getMonth() + 1),

currentMonths: (currentObj.getMonth() + 1),

})

var month;

if (parseInt(currentObj.getMonth() + 1)>10){

month = (currentObj.getMonth() + 1)

}else{

month = '0'+(currentObj.getMonth() + 1)

}

this.setData({ morenrq: month})

this.setSchedule(currentObj);

this.qingc()

/**

* 生命周期函数--监听页面显示

onShow: function () {

qingc: function () {

var currentObj = this.getCurrentDayString()

var self = this;

var arrs = [];

var arrr = [];

console.log(trag_daystr)

console.log(self.data.morenrq)

for (var s = 0; s <trag_daystr.length; s++) {

var cour = trag_daystr[s].date.substr(5, 2);

arrs.push(cour)

if (cour == self.data.morenrq) {

arrr.push(trag_daystr[s])

}

arrs = unique(arrs);

arrs = evlabc(arrs);

var currentDayList = self.data.currentDayList;

console.log(currentDayList)

for (var j = 0; j < currentDayList.length; j++) {

for (var i = 0; i < arrr.length; i++) {

if (currentDayList[j].date == arrr[i].date) {

currentDayList[j].data = arrr[i].data

currentDayList[j].childprice = arrr[i].childprice

currentDayList[j].adultprice = arrr[i].adultprice

currentDayList[j].numberlimit = arrr[i].numberlimit

}

if (parseInt(self.data.currentDay) == parseInt(currentDayList[j].date.substring(8))) {

if (currentDayList[j].adultprice == "") {

self.setData({

currentDay: arrr[0].date.substring(8)

})

}

self.setData({

yue: arrs,

trag_daystr: trag_daystr,

currentDayList: currentDayList,

})

// /获取当前时间方法

getCurrentDayString: function () {

var objDate = this.data.currentObj

if (objDate != '') {

return objDate

} else {

var c_obj = new Date()

var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()

return new Date(a)

}

doDay: function (e) {

var that = this;

var currentObj = that.data.currentObj

var Y = currentObj.getFullYear();

var m = e.currentTarget.dataset.id;

var d = currentObj.getDate();

var str = Y + '/' + m + '/' + d

console.log(str)

currentObj = new Date(str)

this.setData({

currentDate: currentObj.getFullYear() + '/' + (currentObj.getMonth() + 1) + '/' + currentObj.getDate(),

currentObj: currentObj,

currentDay: that.data.currentDays,

/* 获取当前的年、月 */

currentYear: currentObj.getFullYear(),

currentMonth: (currentObj.getMonth() + 1),

m: m,

morenrq: m

})

console.log(m)

// console.log("选择当前年：" + that.data.currentYear);

// console.log("选择当前月：" + that.data.currentMonth);

that.setSchedule(currentObj);

that.qingc()

getCurrentDayString: function () {

var objDate = this.data.currentObj

if (objDate != '') {

return objDate

} else {

var c_obj = new Date()

var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()

return new Date(a)

}

setSchedule: function (currentObj) {

var that = this

var m = currentObj.getMonth() + 1

var Y = currentObj.getFullYear()

var d = currentObj.getDate();

var dayString = Y + '/' + m + '/' + currentObj.getDate()

var currentDayNum = new Date(Y, m, 0).getDate()

var currentDayWeek = currentObj.getUTCDay() + 1

var result = currentDayWeek - (d % 7 - 1);

var firstKey = result <= 0 ? 7 + result : result;

var currentDayList = [];

var f = 0;

if (parseInt(m) < 10) {

m = '0' + m

}

var d;

for (var i = 0; i < 42; i++) {

let data = []

if (i < firstKey) {

currentDayList[i] = { "date": "", "adultprice": "", "childprice": "", "dc_id": "", "numberlimit": "", "id": "" }

} else {

if (f < currentDayNum) {

d = (f + 1)

if (parseInt(d) < 10) {

d = '0' + d

}

currentDayList[i] = { "date": Y + '-' + m + '-' + d, "adultprice": "", "childprice": "", "dc_id": "", "numberlimit": "", "id": "" }

currentDayList[i].id = f + 1;

f = currentDayList[i].id

// }

} else if (f >= currentDayNum) {

currentDayList[i] = { "date": "", "adultprice": "", "childprice": "", "dc_id": "", "numberlimit": "", "id": "" }

}

that.setData({

currentDayList: currentDayList

})

//选择具体日期方法--xzz1211

selectDay: function (e) {

var that = this;

console.log(e);

var a;

var b;

if (that.data.currentMonth < 10) {

a = '0' + that.data.currentMonth

} else {

a = that.data.currentMonth

}

if (e.target.dataset.day < 10) {

b = '0' + e.target.dataset.day

} else {

b = e.target.dataset.day

}

var arrs = trag_daystr;

var s = that.data.currentYear + '-' + a + '-' + b;//真实选择数据

for (var i = 0; i < arrs.length; i++) {

var dates = new Date(arrs[i].date);

var date2s = new Date(s);

dates = dates.getTime(); date2s = date2s.getTime();

if (dates == date2s) {

arrs = arrs.slice(i);

}

that.setData({

trag_daystr: arrs,

currentDay: e.target.dataset.day,//选择的数据，非真实当前日期

currentDa: e.target.dataset.day, //选择某月具体的一天

currentDate: that.data.currentYear + '-' + that.data.currentMonth + '-' + e.target.dataset.day,//真实选择数据

riqi: true, dateCre:0

})

console.log('当前选择：'+that.data.currentYear + '-' + that.data.currentMonth + '-' + e.target.dataset.day)

rqClick: function (e) {

this.setData({

riqi: false

});

dateClick: function (e) {

// console.log(e)

console.log('当前选择：'+e.currentTarget.dataset.list.date)

this.setData({

crprice: e.currentTarget.dataset.list.adultprice,

etprice: e.currentTarget.dataset.list.childprice,

dateCre: e.currentTarget.dataset.index,

dc_id: e.currentTarget.dataset.list.dc_id,

opsDate: e.currentTarget.dataset.list.date

})

wxml 部分

<view>￥{{item.adultprice}}</view>

</view>

</view>

<scroll-view scroll-y style="height:{{screenHeight}}px;" class='riqiBack'>

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">

</view>

</scroll-view>

</view>

<view class="item-content">{{currentDate}}</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

<view data-day="{{vo.id}}" bindtap='{{vo.id<currentDays&&m==currentMonths||vo.id==""||vo.adultprice==""?"":"selectDay"}}' class="item-content {{!selectCSS}}" style='{{vo.id<currentDays&&m==currentMonths||vo.adultprice==""?"color:#999":""}}' wx:if="{{currentDay != vo.id}}" data-index='{{currentMonths}}'

data-s="{{m}}">{{vo.id}}</view>

<view style=' font-size:22rpx;color:#666; {{vo.adultprice==""?"display:none":""}}' wx:if="{{currentDay != vo.id}}">￥{{vo.adultprice}}</view>

<view class="reds" style='{{vo.adultprice==""?"display:none;":""}}' wx:else>￥{{vo.adultprice}}</view>

</view>

</scroll-view>

</view>

wxss 部分

.riqi {

position: fixed;

width: 100%;

height: 100%;

top: 0;

background: rgba(0, 0, 0, 0.5);

}

.riqiBack {

position: absolute;

top: 300rpx;

background: #fff;

width:100%;

}

.box {

display: block;

margin: 10px;

}

.box-flex {

display: -webkit-box;

display: -webkit-flex;

display: flex;

flex-wrap: wrap;

}

.qtmdF{

display: flex;

border-bottom: 1px solid #EBEBEA;

}

.qtmdF>view{

padding: 20rpx 30rpx;

}

.flex-item {

flex-flow: nowrap;

flex-grow: 1;

position: relative;

flex-shrink: 1;

width: 14.2%;text-align:center;

}

.item-content {

margin: 5px;

padding: 0 10px;

padding-bottom: 0;

margin-bottom: 0;

text-align: center;

background-color: #fff;

height: 2rem;

line-height: 2rem;

border-radius:5rpx;

color: #000;

}

.reds{

color: #fff;

font-size:20rpx;

position: absolute;

bottom: 10rpx;

width: 100%;

text-align: center;

}

.bk-color-day {

background-color: blue;

color: #fff;

height:2.8rem;

}

.item-content-current-day {

flex-grow: 2;

}

.dateV {

margin-top: 20rpx;

background: #f8f8fa;

padding: 20rpx;

}

.dateVlist {

display: flex;

flex-flow: wrap;

}

.dateVlistV {

width: 22.8%;

margin-right: 20rpx;

margin-top: 20rpx;

height: 94rpx;

text-align: center;

color: #999;

box-sizing: border-box;

font-size: 24rpx;

padding-top: 14rpx;

border-radius: 5px;

background-color: #f3f3f3;

}

.dateVlist>view:nth-child(4), .dateVlist>view:nth-child(8) {

margin-right: 0rpx;

}

.btn_addcart{

background-color:#383838;color:#fff;

}

小程序 旅游日期选择 日历

推荐阅读更多精彩内容

小程序旅游日期选择日历