Sélecteur de date et d'heure du sélecteur d'applet WeChat-Développement de mini-programmes-php.cn

Sélecteur de date et d'heure du sélecteur d'applet WeChat

高洛峰

Libérer： 2017-02-18 13:06:48

original

3419 Les gens l'ont consulté

Ce qui suit est une introduction au petit sélecteur, qui est divisé en trois styles :

Celui par défaut peut définir les données par vous-même
mode="time" C'est un sélecteur d'heure
mode="date" est un sélecteur de date

Comme les autres, allons jetez un oeil à picker.wxml

<view class="page">
 <view class="page__hd">
 <text class="page__title">picker</text>
 <text class="page__desc">选择器</text>
 </view>
 <view class="page__bd">
 <view class="section">
  <view class="section__title">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择：{{array[index]}}
  </view>
  </picker>
 </view>
 <view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
   当前选择: {{time}}
  </view>
  </picker>
 </view>

 <view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  <view class="picker">
   当前选择: {{date}}
  </view>
  </picker>
 </view>
 </view>
</view>

Copier après la connexion

picker.wxss

page {
 background-color: #fbf9fe;
 height: 100%;
}
.page__hd{
 padding: 50rpx 50rpx 100rpx 50rpx;
 text-align: center;
}
.page__title{
 display: inline-block;
 padding: 20rpx 40rpx;
 font-size: 32rpx;
 color: #AAAAAA;
 border-bottom: 1px solid #CCCCCC;
}
.page__desc{
 display: none;
 margin-top: 20rpx;
 font-size: 26rpx;
 color: #BBBBBB;
}
.section{
 margin-bottom: 80rpx;
}
.section__title{
 margin-bottom: 16rpx;
 padding-left: 30rpx;
 padding-right: 30rpx;
}
.picker{
 padding: 26rpx;
 background-color: #FFFFFF;
}

Copier après la connexion

picker.js

Page({
 data: {
 array: [&#39;中国&#39;, &#39;美国&#39;, &#39;巴西&#39;, &#39;日本&#39;],
 index: 0,
 date: &#39;2016-09-01&#39;,
 time: &#39;12:01&#39;
 },
 bindPickerChange: function(e) {
 console.log(&#39;picker发送选择改变，携带值为&#39;, e.detail.value)
 this.setData({
  index: e.detail.value
 })
 },
 bindDateChange: function(e) {
 this.setData({
  date: e.detail.value
 })
 },
 bindTimeChange: function(e) {
 this.setData({
  time: e.detail.value
 })
 }
})

Copier après la connexion

adresse de démonstration : WeAppDemo_jb51.rar

Ce qui suit est l'affichage de la page

Sélecteur de date et dheure du sélecteur dapplet WeChat

Trois diagrammes de style :

1. Celui par défaut où vous pouvez définir les données vous-même

Sélecteur de date et dheure du sélecteur dapplet WeChat

2. mode="time" est le sélecteur d'heure

Sélecteur de date et dheure du sélecteur dapplet WeChat

3. mode="date" est le sélecteur de date

Sélecteur de date et dheure du sélecteur dapplet WeChat

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il vous sera utile. L'apprentissage de tout le monde a été utile et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés au sélecteur de date et d'heure du sélecteur d'applets WeChat, veuillez faire attention au site Web PHP chinois !