选择日期与时间

README.md

@@ -48,8 +48,6 @@
 
 ​	My_adsorbRight -- 右边吸附按钮 -- 发布需求
 
-​	My_selectTime -- 选择时间
-
 ​	My_pageReachBottom -- 上拉触底加载动画
 
 ​	My_DisplayBox -- 首页展示盒子

app.wxss

@@ -3,6 +3,13 @@ page {
   background-color: #F6F7F8;
   padding-bottom: 80rpx;
 }
+/*  选择器 */
+.picker {
+  font-size: 32rpx;
+  color: #000000;
+  opacity: 0.3;
+}
+
 /* 清除浮动 */
 .clearfix::after {
   content: "";

components/My_selectTime/index.js

@@ -1,87 +0,0 @@
-// components/My_selectTime/index.js
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        type: {
-            type: String,
-            value: "YTD"
-        },
-        /* 最小时间 */
-        minDate: {
-            type: Number,
-            value: -1546329600000, //1921.1.1
-        },
-        /* 最大选择时间 */
-        maxDate: {
-            type: Number,
-            value: Date.parse(new Date()) - 568080000000 //当前时间
-        },
-        /* 完整版本最大时间 */
-        intactMaxDate: {
-            type: Number,
-            value: Date.parse(new Date())+ 1000 * 60 * 60 * 24 * 3
-        },
-        /* 完整版本最小时间 */
-        intactMinDate: {
-            type: Number,
-            value: Date.parse(new Date()) //当前时间
-        },
-        /* 弹窗显示 */
-        showSelectTime: {
-            type: Boolean,
-            value: false
-        },
-        /* 保存回调 */
-        getTimeData: {
-            type: Function,
-        }
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-        currentDate: new Date().getTime(),
-        formatter(type, value) {
-            if (type === 'year') {
-                return `${value}年`;
-            }
-            if (type === 'month') {
-                return `${value}月`;
-            }
-            return value;
-        },
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        submit() {
-            const time = new Date(this.data.currentDate);
-            let setTime="";
-            if(this.data.type=='YTD'){
-                setTime = time.getFullYear() + '-' + (time.getMonth() + 1) + "-" + time.getDate();
-            }else{
-                setTime = time.getFullYear() + '-' + (time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours()+ ':' +time.getMinutes();
-            }
-                console.log(setTime)
-            this.triggerEvent("getTimeData", setTime)
-            this.setData({
-                showSelectTime: false
-            })
-        },
-        onInput(event) {
-            this.setData({
-                currentDate: event.detail,
-            });
-        },
-        dateOnClose() {
-            this.setData({
-                showSelectTime: !this.data.showSelectTime
-            })
-        },
-    }
-})

components/My_selectTime/index.json

@@ -1,6 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {
-        "van-datetime-picker": "@vant/weapp/datetime-picker/index"
-    }
-}

components/My_selectTime/index.wxml

@@ -1,17 +0,0 @@
-<!-- 时间选择器 -->
-<van-action-sheet wx:if="{{type=='YTD'}}" show="{{ showSelectTime }}" bind:close="dateOnClose">
-    <van-datetime-picker type="date" show-toolbar="{{false}}" value="{{ currentDate }}" bind:input="onInput" min-date="{{ minDate }}" max-date="{{ maxDate }}" formatter="{{ formatter }}" />
-    <!-- 提交按钮 -->
-    <view class="submit_but">
-        <van-button bindtap="submit" custom-class="custom-class" round color="linear-gradient(180deg, #82E0E9 0%, #4BBECF 100%);">确定</van-button>
-    </view>
-</van-action-sheet>
-
-<!-- 时间选择器 -->
-<van-action-sheet wx:if="{{type=='intact'}}" show="{{ showSelectTime }}" bind:close="dateOnClose">
-    <van-datetime-picker type="datetime" show-toolbar="{{false}}" value="{{ currentDate }}" min-date="{{ intactMinDate }}" max-date="{{ intactMaxDate }}" bind:input="onInput" />
-    <!-- 提交按钮 -->
-    <view class="submit_but">
-        <van-button bindtap="submit" custom-class="custom-class" round color="linear-gradient(180deg, #82E0E9 0%, #4BBECF 100%);">确定</van-button>
-    </view>
-</van-action-sheet>

components/My_selectTime/index.wxss

@@ -1,2 +0,0 @@
-/* components/My_selectTime/index.wxss */
-@import "/css/form2.wxss";

pages/announceDemand/index.js

@@ -16,24 +16,36 @@ Page({
         popups: false, //弹出层控制
         ftype: "", //供需类型
         ftitle: "", //供需标题
-        fcontent: "", //需求内容	
-        fenddate: "", //截止日期
-        throttle:false,//节流阀
+        fcontent: "", //需求内容
+        throttle: false, //节流阀
         /* 必填 */
         errTips: {
             ftype: false,
             ftitle: false,
             fcontent: false
-        }
+        },
+        dateStart: null, //日期选择开始时间 当前时间+1天
+        dateEnd: null, //日期选择结束时间 当前时间+6个月
+        optionDate: "选择日期", //选择日期
+        opitonTime: '设置时间', //选择时间
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        /* 设置日期选择器 */
+        const time = new Date(Date.parse(new Date()) + 86400000),
+            End = new Date(Date.parse(time) + 15724800000);
+        this.setData({
+            dateStart: time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate(),
+            dateEnd: End.getFullYear() + '-' + (End.getMonth() + 1) + '-' + End.getDate()
+        });
+        /* 修改参数 */
         if (options.data != undefined) {
             const data = JSON.parse(options.data);
             let attinfos = [];
+            /* 格式化图片 */
             for (let i = 0; i < data.attinfos.length; i++) {
                 let arr = {
                     url: data.attinfos[i].fobsurl,
@@ -44,6 +56,15 @@ Page({
                 }
                 attinfos.push(arr)
             };
+            let optionDate = this.data.optionDate,
+                opitonTime = this.data.opitonTime;
+            /* 格式化时间 */
+            if (data.fenddate != null || data.fenddate != '') {
+                const i = data.fenddate.lastIndexOf(':');
+                let end = data.fenddate.slice(0, i).split(" ");
+                optionDate = end[0];
+                opitonTime = end[1];
+            }
             this.setData({
                 ftype: data.ftype, //供需类型
                 ftitle: data.ftitle, //供需标题
@@ -51,8 +72,27 @@ Page({
                 fenddate: data.fenddate, //截止日期
                 attinfos, //附件列表
                 tsupplyanddemandid: data.tsupplyanddemandid, //ID 0为新增
+                optionDate,
+                opitonTime
             })
-        }
+        };
+    },
+
+    /* 日期选择 */
+    dateChange({
+        detail
+    }) {
+        this.setData({
+            optionDate: detail.value
+        })
+    },
+    /* 时间选择 */
+    timeChange({
+        detail
+    }) {
+        this.setData({
+            opitonTime: detail.value
+        })
     },
     /* 添加图片 */
     imageChange(data) {
@@ -60,10 +100,6 @@ Page({
             attinfos: data.detail.fileList
         })
     },
-    /* 打开时间选择器 */
-    setDate() {
-        this.selectComponent("#SetDate").dateOnClose()
-    },
     /* 设置下架 */
     setSoldOut(date) {
         this.setData({
@@ -100,11 +136,20 @@ Page({
             title: '请检查表单内容',
             icon: "error"
         });
-        if(this.data.throttle) return;
+        if (this.data.throttle) return;
         this.addOrModify()
     },
     /* 新增或修改 */
     addOrModify() {
+        let fenddate = "";
+        if (this.data.optionDate != '选择日期') {
+            fenddate = this.data.optionDate;
+            if (this.data.opitonTime != '设置时间') {
+                fenddate += ' ' + this.data.opitonTime + ':00'
+            } else {
+                fenddate += ' ' + '00:00:00'
+            }
+        };
         /* 发送请求 */
         _Http.basic({
             "accesstoken": wx.getStorageSync('userData').token,
@@ -115,7 +160,7 @@ Page({
                 "ftype": this.data.ftype,
                 "ftitle": this.data.ftitle,
                 "fcontent": this.data.fcontent,
-                "fenddate": this.data.fenddate,
+                "fenddate": fenddate,
                 "fissupply": 0
             }
         }).then(res => {
@@ -125,7 +170,7 @@ Page({
                 icon: "none"
             });
             this.setData({
-                throttle:true
+                throttle: true
             })
             let content = {
                 ownerid: res.data[0].tsupplyanddemandid,

pages/announceDemand/index.json

@@ -1,7 +1,6 @@
 {
   "usingComponents": {
     "My_MultipleChoice": "/components/My_MultipleChoice/index",
-    "van-calendar": "@vant/weapp/calendar/index",
-    "My_selectTime": "/components/My_selectTime/index"
+    "van-calendar": "@vant/weapp/calendar/index"
   }
 }

pages/announceDemand/index.wxml

@@ -14,8 +14,18 @@
             <My_UploadFiles id="UploadFiles" fileList="{{attinfos}}" upType="SupplyAndDemand" UploadShow="{{true}}" maxCount="3" tsupplyanddemand="{{tsupplyanddemand}}" previewSize="65px" bindimageChange="imageChange"></My_UploadFiles>
         </My_GreyRectangleForm>
         <My_GreyRectangleForm title="下架日期">
-            <view style="width: 100%; height: 100%; z-index: 999; position: absolute;" bindtap="setDate"></view>
-            <van-field autosize model:value="{{ fenddate }}" input-class="input-class" placeholder="点击设置" border="{{ false }}" />
+            <!-- 时间选择器 -->
+            <picker mode="date" start="{{dateStart}}" end="{{dateEnd}}" bindchange="dateChange">
+                <view class="picker">
+                    {{optionDate}}
+                </view>
+            </picker>
+            <!-- 时间选择器 -->
+            <picker mode="time" start="{{tiemStart}}" end="{{tiemEnd}}" bindchange="timeChange">
+                <view wx:if="{{optionDate!='选择日期'}}" class="picker" style="margin-left: 8rpx;">
+                    {{opitonTime}}
+                </view>
+            </picker>
         </My_GreyRectangleForm>
     </view>
 </My_GeneralTemplate>
@@ -25,9 +35,6 @@
     <My_MultipleChoice title="需求分类" dataList="{{ftypeList}}" pitchOnItem="{{ftype}}" bind:optionChange="radioChange"></My_MultipleChoice>
 </van-action-sheet>
 
-<!-- 时间选择器 -->
-<My_selectTime id="SetDate" type="intact" bind:getTimeData="setSoldOut"></My_selectTime>
-
 <!-- 提交按钮 -->
 <view class="submit_but">
     <van-button bindtap="submit" custom-class="custom-class" round color="linear-gradient(180deg, #82E0E9 0%, #4BBECF 100%);">发 布</van-button>

pages/userCenter/index.js

@@ -21,6 +21,7 @@ Page({
         fwechatno: "",
         faddress: "",
         frole: "",
+        YMD:"",//日期
         /* 错误提示 */
         errTips: {
             fname: false, //用户名
@@ -34,6 +35,13 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        /* 日期 */
+        let time = new Date(Date.parse(new Date()) - 568080000000);
+        let d = time.getDate();
+        if (d < 10) d = '0' + d;
+        this.setData({
+            YMD: time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + d
+        });
         const userMessage = JSON.parse(options.data);
         let attinfos = [];
         if (userMessage.attinfos.length >= 1) {
@@ -57,22 +65,17 @@ Page({
             frole: userMessage.frole
         })
     },
+    timeChange({detail}){
+        this.setData({
+            fbirthdate:detail.value
+        })
+    },
     /* 修改性别 */
     sexOnChange(event) {
         this.setData({
             fsex: event.detail,
         });
     },
-    /* 打开时间选择器 */
-    setDate() {
-        this.selectComponent("#SetDate").dateOnClose()
-    },
-    /* 设置生日 */
-    setBbirthday(date) {
-        this.setData({
-            fbirthdate: date.detail
-        })
-    },
     /* 表单验证 */
     formVerify() {
         let errTips = this.data.errTips,

pages/userCenter/index.json

@@ -1,7 +1,6 @@
 {
   "usingComponents": {
     "My_UploadFiles": "../../components/My_UploadFiles/index",
-    "My_selectTime": "/components/My_selectTime/index",
     "van-radio": "@vant/weapp/radio/index",
     "van-radio-group": "@vant/weapp/radio-group/index"
   }

pages/userCenter/index.wxml

@@ -38,16 +38,19 @@
             </van-radio-group>
         </My_GreyRectangleForm>
         <My_GreyRectangleForm title="生日">
-            <view style="width: 100%; height: 100%; z-index: 999; position: absolute;" bindtap="setDate"></view>
-            <van-field autosize model:value="{{ fbirthdate }}" input-class="input-class" placeholder="点击设置" border="{{ false }}" />
+            <!-- 时间选择 -->
+            <picker value="{{fbirthdate}}" mode="date" start="1921-01-01" end="{{YMD}}" bindchange="timeChange">
+                <view class="picker">
+                    {{fbirthdate!=null?fbirthdate:'选择日期'}}<van-icon name="arrow" />
+                </view>
+            </picker>
         </My_GreyRectangleForm>
         <My_GreyRectangleForm title="邮箱">
             <van-field autosize model:value="{{ femail }}" input-class="input-class" placeholder="邮箱地址" border="{{ false }}" data-name="femail" bind:focus='inputFocus' bindblur='inputBlur' error="{{errTips.femail}}" />
         </My_GreyRectangleForm>
     </view>
 </My_GeneralTemplate>
-<!-- 时间选择 -->
-<My_selectTime id="SetDate" bind:getTimeData="setBbirthday"></My_selectTime>
+
 <!-- 提交按钮 -->
 <view class="submit_but">
     <van-button bindtap="submit" custom-class="custom-class" round color="linear-gradient(180deg, #82E0E9 0%, #4BBECF 100%);">保存</van-button>