微信小程序日期选择器（起始日期与终止日期）轮子复制粘贴直接用————modal组件

最新推荐文章于 2024-09-16 22:58:00 发布

你好昵称已存在

最新推荐文章于 2024-09-16 22:58:00 发布

阅读量2.5k

点赞数

分类专栏：微信小程序文章标签：小程序 html css

本文链接：https://blog.csdn.net/weixin_43207103/article/details/104783785

版权

本文介绍了如何在微信小程序中创建一个日期选择器，包括起始日期和终止日期的选择。提供了一个可直接使用的示例，包含wxml、js和wxss代码片段。虽然存在一个小bug，即选完开始日期后，终止日期默认为开始日期，但整体功能不受影响。

摘要由CSDN通过智能技术生成

先上图。

每次开始默认获取当前选择的日期。
在这里插入图片描述

wxml

<view class="beijing">
  <view class="second">
    <view class="second_1">
      <view class="second_1_1">
        <button bindtap="begin" type="primary">点击重选</button>
      </view>
      <view class="second_1_2">
        <text>当前开始日期：</text>
        <text style="font-weight: bold;">{
   {
   year_0}}年{
   {
   month_0}}月{
   {
   day_0}}日</text>
      </view>
    </view>
    <view class="second_1">
      <view class="second_1_1">
        <button bindtap="end" type="primary">点击重选</button>
      </view>
      <view class="second_1_2">
        <text>当前终止日期：</text>
        <text style="font-weight: bold;">{
   {
   year_1}}年{
   {
   month_1}}月{
   {
   day_1}}日</text>
      </view>
    </view>
  </view>
</view>

<!-- 日期选择器 -->
<view wx:if="{
   {isShowDates}}" class="showDates">
 <modal show="true" height='60%;width:100%' bindconfirm='day0_1' no-cancel="true">
      <view class="time_text">{
   {
   year}}-{
   {
   month}}-{
   {
   day}}</view>
      <view class="time_title">
        <view class="time_title_text">年</view>
        <view class="time_title_text">月</view>
        <view class="time_title_text">日</view>
      </view>
      <picker-view wx:if="{
   {years.length>0 && months.length>0 && days.length>0}}"  indicator-style="height: 50px;" class="view_picker" style="width: 100%;" value="{
   {value}}" bindchange="bindChange" &