微信小程序 选择器

日期选择

<view class="section">
	<picker mode="date" value="{
     
     {date}}" start="1980-01-01" end="{
     
     { dates2 }}" bindchange="StartDate">
		<view class="picker">
			开始日期: <text style="color:blue;">{
   
   {dates1}}</text>
		</view>
	</picker>
</view>

//  点击日期组件确定事件  
StartDate: function (e) {
    
    
	console.log("StartDate>>>" + e.detail.value)
	this.setData({
    
    
		dates1: e.detail.value
	})
},

data: {
    
    
	dates1: "2020-01-01",
},

普通选择器

<view class="section__title">普通选择器：（普通数组）</view>
	<picker bindchange="bindPickerChange" value="{
     
     {index}}" range="{
     
     {array}}">
	<view class="picker">
		当前选择：{
   
   {array[index]}}
	</view>
</picker>

//普通选择器：
bindPickerChange: function (e) {
    
    
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
    
    
    index: e.detail.value
  })
},

data:{
    
    
	//普通选择器：（普通数组）
    array: ['选项1', '选项2', '选项3', '选项4'],
    index: 0,//默认显示位置
},

普通选择器 json 格式数组

<!--选择器-->
<view class="section">
	<view class="section__title">普通选择器2：（普通json格式数组）</view>
	<picker bindchange="bindPickerChange2" value="{
     
     {objectIndex}}" range="{
     
     {objectArray}}" range-key="name">
	<view class="picker">
		当前选择：{
   
   {objectArray[objectIndex].name}}
	</view>
	</picker>
</view>

data:{
    
    
//普通选择器2：（普通json格式数组）
objectArray: [
  {
    
    
    id: 0,
    name: '中国'
  },
  {
    
    
    id: 1,
    name: '美国'
  },
  {
    
    
    id: 2,
    name: '德国'
  },
  {
    
    
    id: 3,
    name: '法国'
  }
],
objectIndex: 0,//默认显示位置
},

//普通选择器2：
bindPickerChange2: function (e) {
    
    
 console.log('picker发送选择改变，携带值为', e.detail.value)
 this.setData({
    
    
   objectIndex: e.detail.value
 })
},