init picker

app.js

+//app.js
+App({
+  
+})
\ No newline at end of file

app.json

+{
+  "pages":[
+    "pages/notices/notices",
+    "pages/tdetail/tdetail",
+    "pages/detail/detail",
+    "pages/index/index"
+    
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle":"black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

app.wxss

+@import './icon.wxss'
\ No newline at end of file

components/yPicker/ypicker.js

+const meng_date = new Date();
+let sec=false;
+let years = [];
+let months = [];
+let days = [];
+let hours = [];
+let minutes = [];
+let seconds=[]
+//获取年
+for (let i = meng_date.getFullYear()-10; i <= meng_date.getFullYear() + 10; i++) {
+  years.push("" + i);
+}
+//获取月份
+for (let i = 1; i <= 12; i++) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  months.push("" + i);
+}
+//获取日期
+for (let i = 1; i <= 31; i++) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  days.push("" + i);
+}
+//获取小时
+for (let i = 0; i < 24; i++) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  hours.push("" + i);
+}
+//获取分钟
+for (let i = 0; i < 60; i++) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  minutes.push("" + i);
+}
+//获取秒数
+for (let i = 0; i < 60; i++) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  seconds.push("" + i);
+}
+
+Component({
+  lifetimes:{
+    created:function(){
+      console.log(this.properties.s)
+      if(this.properties.s && this.properties.s==true){
+        sec=true
+      }
+    },
+    // 这时节点树已创建完成，开始可以用setData渲染节点，但还无法操作节点
+    attached:function(){
+      //设置默认的年份
+      this.setData({
+        choose_year: this.data.multiArray[0][0]
+      })
+    }
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    s:Boolean,
+    open:Boolean,
+    size:String,
+    color:String
+  },
+
+  /**
+   * 组件的自身数据
+   */
+  data: {
+    time: '',
+    multiArray: sec!=true?[years, months, days, hours, minutes]:[years, months, days, hours, minutes,seconds],
+    multiIndex: sec!=true?[10, meng_date.getMonth()+1, meng_date.getDate(), meng_date.getHours(), meng_date.getMinutes()]:[10, meng_date.getMonth()+1, meng_date.getDate(), meng_date.getHours(), meng_date.getMinutes(),meng_date.getSeconds()],
+    choose_year:''
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //获取时间日期 - 点进picker组件而什么也不干 && 每次触发完成后 -> 每次点击“确定”时携带值
+  bindMultiPickerChange: function(e) {
+    // console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      multiIndex: e.detail.value
+    })
+    const index = this.data.multiIndex;
+    const year = this.data.multiArray[0][index[0]];
+    const month = this.data.multiArray[1][index[1]];
+    const day = this.data.multiArray[2][index[2]];
+    const hour = this.data.multiArray[3][index[3]];
+    const minute = this.data.multiArray[4][index[4]];
+    if(this.data.multiArray.length==6){
+      const second=this.data.multiArray[5][index[4]]
+      this.setData({
+        time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+      })
+    }else{
+      this.setData({
+        time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
+      })
+    }
+    
+    
+    this.triggerEvent('bindMultiPickerChange',this.data.time)
+    
+  },
+  //监听picker组件的每一列列表滚动事件
+  bindMultiPickerColumnChange: function(e) {
+    //获取年份
+    if (e.detail.column == 0) {
+      let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
+      
+      this.setData({
+        choose_year
+      })
+    }
+    //console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
+    if (e.detail.column == 1) {
+      let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
+      let temp = [];
+      if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
+        for (let i = 1; i <= 31; i++) {
+          if (i < 10) {
+            i = "0" + i;
+          }
+          temp.push("" + i);
+        }
+        this.setData({
+          ['multiArray[2]']: temp   //天数更新（根据月份）
+        });
+      } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
+        for (let i = 1; i <= 30; i++) {
+          if (i < 10) {
+            i = "0" + i;
+          }
+          temp.push("" + i);
+        }
+        this.setData({
+          ['multiArray[2]']: temp
+        });
+      } else if (num == 2) { //判断2月份天数
+        let year = parseInt(this.data.choose_year);
+        console.log(year);
+        if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
+          for (let i = 1; i <= 29; i++) {
+            if (i < 10) {
+              i = "0" + i;
+            }
+            temp.push("" + i);
+          }
+          this.setData({
+            ['multiArray[2]']: temp
+          });
+        } else {
+          for (let i = 1; i <= 28; i++) {
+            if (i < 10) {
+              i = "0" + i;
+            }
+            temp.push("" + i);
+          }
+          this.setData({
+            ['multiArray[2]']: temp
+          });
+        }
+      }
+      // console.log(this.data.multiArray[2]);
+    }
+    var data = {
+      multiArray: this.data.multiArray,
+      multiIndex: this.data.multiIndex
+    };
+    data.multiIndex[e.detail.column] = e.detail.value;
+    this.setData(data);
+  },
+  }
+})

components/yPicker/ypicker.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

components/yPicker/ypicker.wxml

+<picker class="{{open==true?'item-value':''}}" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
+  <!-- input有自带样式，其基于父组件（显示为自带默认宽高），这里可以通过传值决定input内容显示位置 -->
+	<input value='{{time}}' placeholder='请选择时间' style="text-align: {{size || 'right'}}; color: {{color}}" />
+</picker>
\ No newline at end of file

components/yPicker/ypicker.wxss

+.item-value{
+  font-size: 34rpx;
+  margin-right: 19rpx;
+}
\ No newline at end of file

icon.wxss

+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1953785_ajhhpx9h9ve.eot?t=1595292894314'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1953785_ajhhpx9h9ve.eot?t=1595292894314#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAREAAsAAAAACPQAAAP2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDOAqEaIQFATYCJAMYCw4ABCAFhG0HZRu4BxEVnHfJfh7YMR3r92FkpEXa7WMQUF5VjWTgJc/QS84eyZ/MbG3asVWFjDBMyXnwXf55Etj5ywc6hPRFkQ3T8YTyZJqC3B/3qmYtgfmA4jLXpE+5AIYDFKAxZscGKXALUlGvCng23YUJOg8BuEkiF6JSlVqNcKIRpwlA9OretT1OjwGdUC5wIjAj1mrEdAyccoI8C0wzfl+8oYBwgsRQiHPrdanciXLPeb5cWbZFKw2FsDobcNsECsgFaBC9Ih1dUFYiFwr3J1dTAnBKgyQ8l88jny+3bSYgGorNiZf/5YGBQqIRIEzEUi8AtThpwHMUgaMU0KGglJBjKCOhQ0O5HKLF0ZgVjvEDe4D3iLRM9FVoJBLl9Qbp+/t8USLC4XV5219/3uTGi6bXnjW++nTw1auNrl1rfONG0+vXm/vnbowS8zZFB+ZsiGT2+iHB1YcxrSOZQ+uOxTsWHh1orXf7J24URsYmT2DSBpr53RNnW3MiA/PmZcztoLF1k+bFVM+dOLuPmBsV1cU8aL0V2bjR7Pkb1kR3nbcoKqqPG6/ILiOdzuO7o8SzG7mFG3fjPnPmr564dmH0ok2TNjTaeznjyqRL1sUmV6+Wa1mfk9ftEbd0Soq+JelSUlSBQzJuVvlm7T6kf/7UkB668iAUJh/89avu+ajjIa/hDR03+lKsY6eYhwdTopMPPaRFh/zRgYOcqhtqFPwcrBRSeOAKg0a1Kqy8doy9vdh2zV/RLiK/em8xfBwbphOeFhYyNyY1TTz07e33Vwd9TS4eDFfjs9SQvL8W+W37t0jXIdc3RXnbuGt8YtP3Od837bWAAmN8N4YnDL/hM07nOJ1/yPYJTSXUgv45/tdiXOX1MfWmtGsGRSe3i6233vtISgFg71GXVScAuUNuAVCGXAe7kCknxd8w8+WqC20Dpb45PRqAO6Va30eTbWmUBXtWmFl4CggztuivWDSa+o2sNCEAkxKuHCTglsyw8zMQxv2qXJHg2ATOuxAgcZAICieZ0BqfCww8FAITJ2XBTU6qbvYQTm8UQruAHIwhEATZBhI/x0AR5Bxa4++BwRTlD6ZgCtyaFL6nR5a6V3E0ihWUX2gtTySb9WKW37CeByNusUF/ofg2DEkY+9MFTihVLPBLnaoSkPAIOV2Gw8DghDu0GjaqLosiivqi0PK4uqhIIEOhCih9gZbFJqR1VpfAz9+g2mxgSALih/MFCa/tHSRCcQZ0oZgyIXblJd6illKKACLYCORkQ4OUYMBFj+ogS4WaAjEnE3E7yqoIm1eNa7kLcBP3NZtWu9Pt8X9magx7JTbZZt65bcmV/IVzG1h2X3X5YSDzM+2x3ri0+F6tAAAA') format('woff2'),
+  url('//at.alicdn.com/t/font_1953785_ajhhpx9h9ve.woff?t=1595292894314') format('woff'),
+  url('//at.alicdn.com/t/font_1953785_ajhhpx9h9ve.ttf?t=1595292894314') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_1953785_ajhhpx9h9ve.svg?t=1595292894314#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-jianhaoshanchu:before {
+  content: "\e6a0";
+}
+
+.icon-jia1:before {
+  content: "\e602";
+}
+
+.icon-fanhui-copy-copy:before {
+  content: "\e601";
+}
+
+.icon-xiazai:before {
+  content: "\e615";
+}
+
+.icon-Preview:before {
+  content: "\e600";
+}

pages/notices/notices.js

+
+Page({
+  data:{
+  },
+  onShow(){
+  },
+  
+  //获取时间日期
+  bindMultiPickerChange: function(e) {
+    console.log(e.detail)
+  },
+})
\ No newline at end of file

pages/notices/notices.json

+{
+  "navigationBarTitleText": "通知",
+  "usingComponents": {
+    "y-picker":"../../components/yPicker/ypicker"
+  }
+}
\ No newline at end of file

pages/notices/notices.wxml

+<form bindsubmit="register">
+
+	<!-- 这里是三行和通知有关的，也用list整体布局吧 -->
+	<view class="n_top">
+		<view class="list" wx:if="{{swItch!=0}}">
+			<view class="left">通知时间</view>
+			<view class="l_right">
+        <y-picker open="true" size="right" color="#888888" s="false" bind:bindMultiPickerChange="bindMultiPickerChange"></y-picker>
+				<i class="iconfont icon-fanhui-copy-copy"></i>
+			</view>
+		</view>
+	</view>
+
+
+</form>
\ No newline at end of file

pages/notices/notices.wxss

+Page{
+  background-color: rgb(248,248,248);
+}
+.n_top{
+  width: 100%;
+  margin-top: 15rpx;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-left: 31rpx;
+  padding-right: 30rpx;
+}
+
+.n_top .list{
+  position: relative;
+  width: 100%;
+  height: 94rpx;
+  border-bottom: 1rpx solid rgba(0,0,0,.1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  letter-spacing: 0;
+}
+.list .left{
+  font-size: 36rpx;
+  color: #000000;
+}
+.list .right{
+  margin-left: 112rpx;
+  font-size: 33rpx;
+  color: #B2B2B2;
+
+}
+
+.list .l_right{
+  position: absolute;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.l_right input{
+  text-align: right;
+}
+.l_right .item-value,.snum{
+  color: #888888;
+  font-size: 34rpx;
+  margin-right: 19rpx;
+}
+.l_right .iconfont{
+  font-size: 39rpx;
+  color: #C7C7CC;
+}
+

project.config.json

+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"enhance": false,
+		"postcss": true,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": false,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useIsolateContext": true,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.12.0",
+	"appid": "这里的APPID填写自己的哦！",
+	"projectname": "safety-and-stability-weekly-reportss",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"scripts": {},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}
\ No newline at end of file

sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file