整理的微信小程序日历（单选/多选/筛选）

原创

已于 2024-04-08 10:14:28 修改

· 2.1k 阅读

13 ·

版权

文章标签：

#前端 #javascript #开发语言

于 2024-04-08 10:06:29 首次发布

一、日历横向多选，支持单日、双日、三日、工作日等选择

效果图

wxml文件

<view class="calendar">
  <view class="section">
    <view class="title flex-box">
      <button bindtap="past">上一页</button>
      <view class="title">{
  {currentShow}}</view>
      <button bindtap="future">下一页</button>
    </view>
    <view class="week flex-box">
      <view wx:for="{
  {week}}" wx:key="{
  {item}}" class="weekday">{
  {item}}</view>
    </view>
    <view class="days flex-box">
      <view wx:for="{
  {days}}" wx:key="{
  {item}}" class="day" data-today="{
  {item.today}}" bindtap="select">
        <view class="circle {
  {item.isDisabled?'':'disabled'}}{
  {item.today == today ? '' : ((item.start||item.end) ? 'sign' : item.sign ? 'signsec' : '')}}">
          <view>
            {
  {item.today == today ? '今天' : item.day}}
          </view>
          <view>
            {
  {item.start ? '起' : ''}}
            {
  {item.end ? '止' : ''}}