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,自己来
         }
      }
    })
  • 相关阅读:
    查看自己的笔记本是否支持64位系统
    关闭445端口
    与postgis相关的一些常用的sql
    postgis 赋予postgresql空间数据库的能力
    ThreadLocal
    获取跨域请求的自定义的response headers
    java Bean的映射工具
    Java多线程学习
    (14)Spring Boot定时任务的使用【从零开始学Spring Boot】
    (13)处理静态资源(自定义资源映射)【从零开始学Spring Boot】
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/7085439.html
Copyright © 2011-2022 走看看