微信小程序代码，求wxml和js代码

用微信小程序设计一个表单页，页面中要求有一个文本框，该框中可以写入一个图片的网络路径
表单中要有一个日期picker
在点击提交表单按钮时显示这个图片
并且讲表单组件的值和name输出到控制台

在 wxml 文件中添加表单组件：

<view class="container">
  <form bindsubmit="submitForm">
    <view class="form-group">
      <view class="form-label">图片路径：</view>
      <input type="text" name="imagePath" bindinput="inputImagePath" placeholder="请输入图片路径" />
    </view>
    <view class="form-group">
      <view class="form-label">日期：</view>
      <picker mode="date" name="date" value="{{date}}" bindchange="changeDate">
        <view class="picker">{{date}}</view>
      </picker>
    </view>
    <button type="submit" class="btn-submit">提交表单</button>
  </form>
</view>

2，在 js 文件中添加表单组件的事件处理函数：

Page({
  data: {
    imagePath: '',
    date: ''
  },
  inputImagePath: function(e) {
    this.setData({
      imagePath: e.detail.value
    })
  },
  changeDate: function(e) {
    this.setData({
      date: e.detail.value
    })
  },
  submitForm: function(e) {
    console.log('表单提交：', e.detail.value)
    console.log('图片路径：', this.data.imagePath)
    console.log('日期：', this.data.date)
    wx.previewImage({
      urls: [this.data.imagePath],
    })
  }
})

在 input 组件中使用 bindinput 绑定 inputImagePath 函数，当用户输入图片路径时，将其保存在 data 中的 imagePath 变量中。在 picker 组件中使用 bindchange 绑定 changeDate 函数，当用户选择日期时，将其保存在 data 中的 date 变量中。在 form 组件中使用 bindsubmit 绑定 submitForm 函数，当用户提交表单时，将表单组件的值和 name 输出到控制台，并使用 wx.previewImage 显示图片。

3，在 wxss 文件中添加样式：

.container {
  padding: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-label {
  display: inline-block;
  width: 100rpx;
  text-align: right;
  margin-right: 20rpx;
}

input {
  width: 500rpx;
  height: 80rpx;
  border: 1rpx solid #ccc;
  padding: 20rpx;
  font-size: 32rpx;
}

.picker {
  display: inline-block;
  width: 500rpx;
  height: 80rpx;
  border: 1rpx solid #ccc;
  padding: 20rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
}

.btn-submit {
  display: block;
  width: 100%;
  height: 100rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 36rpx;
  border: none;
  border-radius: 10rpx;
  margin-top: 40rpx;
}

插个眼，我来解决

这篇博客: 微信小程序 picker-从底部弹起的滚动选择器中的 wxml 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

<view>普通选择器：请选择选项</view>
<!--
  mode默认值selector 普通选择器
  range数据源(mode 为 selector 或 multiSelector 时有效)
  value表示选择了数据源中的第几个值(下标从0开始)
  bindchange事件value改变时触发
-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="changeValue">
    <text>{{array[index]}}</text>
</picker>
 
<view>时间选择器：请选择时间</view>
<!-- 
  mode=time 时间选择器
  value 表示选中的时间 格式"hh:mm"
  start 有效时间范围的开始
  end 有效时间范围的结束
  bindchange事件value改变时触发
-->
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="changeTime">
    <text>{{time}}</text>
</picker>
 
<view>日期选择器：请选择日期</view>
<!-- 
  mode =date 日期选择器
  value 表示选中的日期 格式"YYYY-MM-DD"
  start 有效日期范围的开始
  end 有效日期范围的结束
  bindchange事件value改变时触发
 -->
<picker mode="date" value="{{date}}" start="2000-1-1" end="2050-1-1" bindchange="changeDate">
    <text>{{date}}</text>
</picker>