uni-app - 日期 · 时间选择器

news2024/11/15 11:54:44

1.基本介绍

2.案例介绍

①注意事项：

②效果展示

3.代码展示

①view部分

②js部分

③css样式

1.基本介绍

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

2.案例介绍

①注意事项：

当选择时间和日期的时候会默认直接展示当前的时间和当天的日期

②效果展示

3.代码展示

①view部分

<view class="SelectDate">
                           <view class="DateLabel">
                               面试日期
                           </view>
                           <view class="DateText">
                               <picker mode="date" @change="onDateChange" :value="DateValue">
                                   <view class="date-picker">{{DateValue}}</view>
                               </picker>
                           </view>
                       </view>

                       <view class="SelectTime">
                           <view class="TimeLabel">
                               面试时间
                           </view>
                           <view class="TimeText">
                               <picker mode="time" @change="onTimeChange" :value="TimeValue">
                                   <view class="Time-picker">{{TimeValue}}</view>
                               </picker>
                           </view>
                       </view>

②js部分

<script>
   export default {
       data() {

           return {
               DateValue: "请选择日期",
               TimeValue: "请选择时间",
           }
       },
       methods: {

           onDateChange: function(e) {
               this.DateValue = e.detail.value;
           },

           onTimeChange: function(e) {
               this.TimeValue = e.detail.value;
}

       }
   }
</script>

③css样式

        /* ## 日期 ## */

           .SelectDate {
               height: 72rpx;
               display: flex;
               flex-direction: grow;
               margin-top: 24rpx;
           }

           .DateLabel {
               width: 0;
               flex-grow: 3;
               text-align: left;
               padding-left: 24px;

           }

           .DateText {
               width: 0;
               flex-grow: 7;
           }

           .date-picker {
               color: #8f8f8f;
           }

           /* ## 时间 ## */

           .SelectTime {
               display: flex;
               flex-direction: grow;
           }

           .TimeLabel {
               width: 0;
               flex-grow: 3;
               text-align: left;
               padding-left: 24px;
           }

           .TimeText {
               width: 0;
               flex-grow: 7;
           }

           .Time-picker {
               color: #8f8f8f;
           }