{{multiArrayStr[0][multiInd...">
美文网首页
小程序 日期+时间 选择器

小程序 日期+时间 选择器

作者: 悟空_大师兄_ | 来源:发表于2019-06-12 10:14 被阅读0次
废话不多说 直接贴代码

HTML

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArrayStr}}">

  <view class="picker">

    {{multiArrayStr[0][multiIndex[0]]}} {{multiArrayStr[1][multiIndex[1]]}}:{{multiArrayStr[2][multiIndex[2]]}}

  </view>

</picker>

JS

data:{

multiIndex: [0, 15, 0], multiArrayStr: [],

    datearr: ["2018-1-1"],

    hourarr: ["0", '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],

    timearr: ["00", "05", '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],

},

onShow() {

    //计算预约时间

    var self = this

    var edays = 8//从sdays起到第几天

    var sdays = 0

    var datearr = [];

    var datearrStr = [];

    var date = new Date();

    var curdate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

    var hour = date.getHours();

    var days = 0;

    for (var i = 0; i < edays + 1; i++) {

      if (i >= sdays) {

        if (i == 0) {

          datearrStr.push('今天')

        } else

          if (i == 1) {

            datearrStr.push('明天')

          } else

            if (i == 2) {

              datearrStr.push('后天')

            } else {

              datearrStr.push(self.addDate(curdate.replace("-", "/").replace("-", "/"), i))

            }

        datearr.push(self.addDate(curdate.replace("-", "/").replace("-", "/"), i))

      }

    }

    if (hour <= 22) {

      hour += 1;

    } else {

      if (datearrStr.length > 1) {

        days = 1;

      }

      hour = 10;

    }

    console.log([datearr, self.data.hourarr, self.data.timearr], [datearrStr, self.data.hourarr, self.data.timearr])

    self.setData({

      multiIndex: [days, hour, 0],

      multiArray: [datearr, self.data.hourarr, self.data.timearr],

      multiArrayStr: [datearrStr, self.data.hourarr, self.data.timearr]

    })

    //计算预约时间结束

  },

  addDate: function (date, days) {

    var d = new Date(date);

    d.setDate(d.getDate() + days);

    var month = d.getMonth() + 1;

    var day = d.getDate();

    if (month < 10) {

      month = "0" + month;

    }

    if (day < 10) {

      day = "0" + day;

    }

    var val = d.getFullYear() + "-" + month + "-" + day;

    return val;

  },

  bindMultiPickerChange: function (e) {

    var that = this

    that.setData({

      multiIndex: e.detail.value,

      mrstreservedate: that.data.multiArray[0][e.detail.value[0]] + " " + that.data.multiArray[1][e.detail.value[1]] + ":" + that.data.multiArray[2][e.detail.value[2]]

    })

  },

相关文章

网友评论

      本文标题:小程序 日期+时间 选择器

      本文链接:https://www.haomeiwen.com/subject/lnlkfctx.html