小程序日历，日期多选

最新推荐文章于 2025-03-28 11:46:57 发布

Sole Memory°

最新推荐文章于 2025-03-28 11:46:57 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Sole_Memory1/article/details/112392005

这篇博客介绍了如何在字节跳动小程序中，由于无法使用第三方组件，作者自行结合网上案例创建了一个多选日期的日历功能，该日历支持选择六个月内的时间。文章包含WXML/TML视图文件、样式文件和JS逻辑文件的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字节跳动小程序永不了第三方组件，自己结合网上案例写的，多选日期日历，可以选六个月内

日历样式如下：
在这里插入图片描述

wxml / ttml文件

<view class="Box">
  <view class='tips'>本期繁忙时间</view>
  <view style="margin-bottom:150rpx;">
    <scroll-view scroll-y class='scroll-view'>
      <!-- 当前月 -->
      <view class='calendar'>
        <view class='year_month'> {
  {thisYear}}年{
  {thisMonth}}月</view>
        <view class='week'>
          <text class='saturday'>日</text>
          <text>一</text>
          <text>二</text>
          <text>三</text>
          <text>四</text>
          <text>五</text>
          <text class='sunday'>六</text>
        </view>
        <block wx:for="{
    {thisMonthArr}}" wx:key="index">
          <view class='week'>
              <text class="saturday {
    {item[0]['isToday'] == true ? 'now' : ''}} {
    {item[0]['date'] < today ? 'disabled' : ''}} {
    {item[0]['state']==true?'selected':''}}" data-month='thisMonth'  data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[0]['date'] < today ? '' :item[0]['date']}}" data-key='{
    {index}}' data-keyitem='0' bindtap="select_date">{
  {item[0]['date']}}</text>
              <text class="{
    {item[1]['isToday'] == true ? 'now' : ''}} {
    {item[1]['date'] < today ? 'disabled' : ''}} {
    {item[1]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[1]['date'] < today ? '' :item[1]['date']}}" data-key='{
    {index}}' data-keyitem='1' bindtap="select_date">{
  {item[1]['date']}}</text>
              <text class="{
    {item[2]['isToday'] == true ? 'now' : ''}} {
    {item[2]['date'] < today ? 'disabled' : ''}} {
    {item[2]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[2]['date'] < today ? '' :item[2]['date']}}" data-key='{
    {index}}' data-keyitem='2' bindtap="select_date">{
  {item[2]['date']}}</text>
              <text class="{
    {item[3]['isToday'] == true ? 'now' : ''}} {
    {item[3]['date'] < today ? 'disabled' : ''}} {
    {item[3]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[3]['date'] < today ? '' :item[3]['date']}}" data-key='{
    {index}}' data-keyitem='3' bindtap="select_date">{
  {item[3]['date']}}</text>
              <text class="{
    {item[4]['isToday'] == true ? 'now' : ''}} {
    {item[4]['date'] < today ? 'disabled' : ''}} {
    {item[4]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[4]['date'] < today ? '' :item[4]['date']}}" data-key='{
    {index}}' data-keyitem='4' bindtap="select_date">{
  {item[4]['date']}}</text>
              <text class="{
    {item[5]['isToday'] == true ? 'now' : ''}} {
    {item[5]['date'] < today ? 'disabled' : ''}} {
    {item[5]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[5]['date'] < today ? '' :item[5]['date']}}" data-key='{
    {index}}' data-keyitem='5' bindtap="select_date">{
  {item[5]['date']}}</text>
              <text class="sunday {
    {item[6]['isToday'] == true ? 'now' : ''}} {
    {item[6]['date'] < today ? 'disabled' : ''}} {
    {item[6]['state']==true?'selected':''}}" data-month='thisMonth' data-Year="{
    {thisYear}}" data-Month1="{
    {thisMonth}}" data-date="{
    {item[6]['date'] < today ? '' :item[6]['date']}}" data-key='{
    {index}}' data-keyitem='6' bindtap="select_date">{
  {item[6]['date']}}</text> 
          </view>
        </block>
      </view>
      <!-- 下一月 -->
      <view class='calendar'>
        <view class='year_month'>
          <text class='year'>{
  {nextYear}}年</text>
          <text

最低0.47元/天解锁文章