时间截止器

 

 

index.wxml

  <view class="c_item" bindtap="getPublishDate">
        <label for="name">截止时间</label>
        <input type="text" id="name" bin disabled="{{true}}" value="{{publishDate}}" name="alias" placeholder="选择截止时间" />
        <view class="sign"></view>
    </view>



<!-- 截止时间 -->
<view class="zzc" bindtap="pickerOk" wx:if="{{pickerViewShow}}">
    <view class="pick_datetime" animation="{{pickerAnimation}}" style="{{pickerViewStyle}}">
        <view class="pick_datetime_tool">
            <view class="pick_datetime_clear" bindtap="pickerClear">清除</view>
            <view class="pick_datetime_ok" bindtap="pickerOk">完成</view>
        </view>
        <picker-view indicator-style="height: 40px;border-top:2rpx solid #eee;border-bottom:2rpx solid #eee;" value="{{pickDatetimeValue}}" bindchange="bindChange" style="height:{{pickerViewHeight}}rpx;">
            <picker-view-column>
                <view wx:for="{{pickerDateTextArr}}" class="pick_datetime_column">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{pickerHourTextArr}}" class="pick_datetime_column">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{pickerMinuteTextArr}}" class="pick_datetime_column">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>

 

index.wxss

view.c_item {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  display: flex;
  width: 690rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 32rpx;
  padding: 0 24rpx;
  align-items: center;
}

label {
  width: 100rpx;
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 42rpx;
}

.c_item>label:first-child {
  width: 180rpx;
}

input {
  flex: 1;
  height: 42rpx;
  text-align: right;
}

.sign {
  width: 30rpx;
  height: 30rpx;
  margin-left: 20rpx;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAsUlEQVRIS+3WwQ3DIAwFUHuAThYpc0CVcSLwIFmsE7hqju0BY//IqlrOwBO2+DJT0uIkl/7wR+Vbawszc631QLZlWOre+4OIbsy8lVIaCh/CIlJU9QSR+BB+gSJyV9UdiZvgK3AzjManYCQ+DaNwF4zA3XAUD8HvOBGt1oT7TjgSLO4XR9AzAT2hH0VdMAKdhlHoFIxEzTAaNcFpg0Da6JM27Hn+ueWMK0AsF4/2/B78BHOGoh8IJSBXAAAAAElFTkSuQmCC");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}








/* 截止时间样式 */
.pick_datetime {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 99;
  background: #fff;
}

.pick_datetime_tool {
  display: flex;
  justify-content: space-between;
  height: 92rpx;
  line-height: 92rpx;
  /* border-top: 4rpx solid #eee; */
  border-bottom: 2rpx solid #eee;
  /* padding: 0 20rpx; */
}

.pick_datetime_ok {
  font-weight: bold;
  width: 100rpx;
  text-align: right;
  padding-right: 20rpx;

}

.pick_datetime_clear {
  color: #666;
  padding-left: 20rpx;
}

.pick_datetime picker-view {
  font-size: 34rpx;
}

.pick_datetime_column {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.zzc {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 99;
}

 

index.js

var pickerFile = require('../../../utils/time');


Page({
  /**
   * 页面的初始数据
   */
  data: {
    publishDate: ''
  },


 
  getPublishDate: function () {
    this.datetimePicker.setPicker('publishDate');
    this.setData({
      publishDate: this.data.publishDate
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.datetimePicker = new pickerFile.pickerDatetime({
            page:this,
            animation:'slide',
            duration:20
          }); 
  },



})

 

 

工具time.js

 
  getPublishDate: function () {
    this.datetimePicker.setPicker('publishDate');
    this.setData({
      publishDate: this.data.publishDate
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let arr = new Array();
    let obj = {};
    this.data.words.forEach((item) => {
      obj.word = item;
      obj.show = false;
      arr.push(obj);
      obj = {};
    });
    this.setData({
        arr,
      },
      () => {
        console.log(this.data.arr);
      }
    );


    this.datetimePicker = new pickerFile.pickerDatetime({
            page:this,
            animation:'slide',
            duration:20
          }); 
  },