zoukankan      html  css  js  c++  java
  • 微信小程序:酒店订房之时间选择器 picker

    下单页面,选择开始日期和结束日期,不废话,直接代码:

    1、wxml:

      <picker mode="date" value="{{date1}}" start="2010-01-01" end="2030-12-31" bindchange="bindDateChange">
        <view class="form_group">
            <text>住房时间:</text>
            <text class="textss" style="460rpx;text-align:left;">{{date1}}</text>
        </view>
      </picker>
      <picker mode="date" value="{{date2}}" start="2010-01-01" end="2030-12-31" bindchange="bindDateChangeTwo">
        <view class="form_group">
            <text>退房时间:</text>
            <text class="textss" style="460rpx;text-align:left;">{{date2}}</text>
        </view>
      </picker>

    2、js:

    page({
        ...
    
    //为picker绑定方法: 其中获得的时间为2017-06-01格式的。
    bindDateChange: function (e) {
        var that = this;
        that.setData({
          date1: e.detail.value
        })
        console.log(that.data.date1);
      },
      bindDateChangeTwo: function (e) {
        var that = this;
        that.setData({
          date2: e.detail.value
        })
        console.log(that.data.date2);
      },
    //表单提交
     submitForm: function(e){
       //字符串转换为时间戳,单位毫秒
        var date1 = new Date(Date.parse(that.data.date1.replace(/-/g, "/")));
        var date_in = date1.getTime();
        var date2 = new Date(Date.parse(that.data.date2.replace(/-/g, "/")));
        var date_out = date2.getTime();
      if (that.data.is_home == 1 && date1 >= date2 ){
    
          wx.showToast({
    
            title: '退房时间必须大于住房时间!',
    
            icon: 'loading',
    
            duration: 1500
    
          })
    
          setTimeout(function () {
    
            wx.hideToast()
    
          }, 2000) 
        } else if (that.data.is_home==1&& date1<Date.parse(new Date())-86400000 ) {
    
          wx.showToast({
    
            title: '住房时间不能小于当前时间!',
    
            icon: 'loading',
    
            duration: 1500
    
          })
    
          setTimeout(function () {
    
            wx.hideToast()
    
          }, 2000)      
    
         } else{
              //处理表单的code,自己来
         }
      }
    })
  • 相关阅读:
    【计算机世界】467- XOR — 神奇的按位运算符
    记 · 复习知识 · 偶遇好玩的知识点
    【CSS】466- 一行 CSS 代码搞定响应式布局
    【Web技术】465- 关于前端埋点统计方案思考
    【CSS】464- 5种 CSS 浮动和清除浮动的方法
    简单易懂的 React useState() Hook 指南(长文建议收藏)
    java中的四类八种
    线程
    异常
    Aspx Ajax 调用 C#函数处理数据
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/7085439.html
Copyright © 2011-2022 走看看