微信小程式 工作時間段選擇 星期幾選擇

2021-08-20 15:22:39 字數 818 閱讀 4953

1. 效果圖如上  需完成時間段的選擇  以及下面的工作日選擇  儲存按鈕為formsubmit提交後台

2.思路: ①時段用picker跟input  如果沒有佔位字元  則不需要input

②工作日選擇用checkbox  多選的樣式用label  將checkbox隱藏

③label的選擇後的樣式跟取消的樣式,這裡無需判斷checked  當然也可以判斷checked  我這裡的方法是,先建乙個放星期一到星期天的陣列date,選擇之後,在js裡返回的detail.value裡找到所選擇的日期selectedlist,再判斷date是否在selectedlist內存在(注意是date在list中是否存在)。

如果存在則設對應的布林為true,否則false。

下面為**:

wxml

wx js

// pages/mine/index.js

page(,

// selected內放對應的用來判斷class的布林json

},bindtimechange: function(e));

}else if (e.currenttarget.id=="endtime") );}},

checkboxchange: function(e)else

}this.setdata();

},formsubmit:function(e),

微信小程式之當天時間段選擇!5 00 6 00

本著利用簡單易懂的原則,搞出來了,還真tm的是個人才 multiselector bindchange bindmultipickerchange bindcolumnchange bindmultipickercolumnchange value range picker 因為是當天時間段 a b...

微信小程式時間加法 微信小程式日期轉換 比較 加減

日期轉時間戳 functiongetunixtime datestr 時間戳轉日期,falg true表示只要年月日,part year month date functiontodate number,flag,part else if part month else if part date r...

微信小程式 聯動選擇器

從底部彈起的滾動選擇器,現支援五種選擇器,通過mode來區分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區選擇器,預設是普通選擇器。先來看看效果圖 普通選擇器 view picker bindchange bindpickerchang value range view class ...