기본 애플릿 구성 요소 선택기를 사용하여 날짜 및 시간 선택기를 사용자 정의합니다.

기본 애플릿 구성 요소 선택기를 사용하여 날짜 및 시간 선택기를 사용자 정의합니다.

1. Picker에 대한 간략한 소개

Picker에는 5가지 유형이 있음을 확인할 수 있으며, 자세한 내용은 WeChat Open Document Picker를 참조하세요 .

선택기는 여러 옵션에서 하나 이상의 옵션을 선택하는 데 사용되는 일반적인 사용자 인터페이스 컨트롤입니다. 애플릿에서 Picker는 날짜, 시간, 위치 및 기타 정보를 선택하는 데 사용할 수 있는 구성 요소입니다.

애플릿의 Picker 구성 요소는 mode="selector", , 등을 포함한 여러 가지 모드를 제공합니다 mode="multiSelector". 구체적인 기능과 사용법은 다음과 같습니다.mode="time"mode="date"mode="region"

1. mode="selector"range(단일 열 선택기): 이 모드에서는 사용자가 옵션을 선택할 수 있는 속성을 설정하여 선택기의 옵션 목록으로 배열을 지정할 수 있습니다 .

2. mode="multiSelector"(다중 열 선택기): 이 모드에서는 range속성을 설정하여 선택기의 옵션 목록으로 2차원 배열을 지정할 수 있습니다. 여기서 각 하위 배열은 열을 나타내며 사용자는 각 열에서 옵션을 선택할 수 있습니다. rangeKey각 옵션에는 속성을 통해 선택기에 표시할 키워드가 제공될 수 있습니다 .

3. mode="time"(시간 선택기): 이 모드에서는 시, 분 등의 시간을 선택하는 데 사용됩니다. start및 속성을 설정하여 end선택적 시간 범위를 지정할 수 있습니다.

4. mode="date"(날짜 선택기): 이 모드에서는 연, 월, 일을 포함한 날짜를 선택하는 데 사용됩니다. start및 속성을 설정하여 end선택적 날짜 범위를 지정할 수 있습니다 .

5. mode="region"(지방 및 도시 선택기): 지방 및 도시를 선택하는 모드입니다.

Picker 컴포넌트를 사용하려면 미니 프로그램 페이지의 WXML 파일에 해당 태그를 추가하고 해당 JavaScript 파일에 사용자의 선택을 처리할 수 있는 이벤트 처리 함수를 작성해야 합니다.

다음은 날짜 선택을 위해 Picker 구성 요소를 사용하는 방법을 보여주는 샘플 코드입니다.

<view>
  <picker mode="date" bindchange="handleDateChange">
    <text>选择日期</text>
  </picker>
  <text>选择的日期：{
   
   {selectedDate}}</text>
</view>

Page({
    
    
  data: {
    
    
    selectedDate: ''
  },
  handleDateChange: function (event) {
    
    
    const selectedDate = event.detail.value;
    this.setData({
    
    
      selectedDate: selectedDate
    });
  }
});

예제에서는 mode="date"Picker 컴포넌트를 사용했는데, 사용자가 날짜를 선택하면 bindchange이벤트가 발생하고, handleDateChange선택된 날짜가 이벤트 핸들러 함수에서 얻어져 selectedDate페이지의 데이터 객체에 있는 속성에 저장됩니다. 데이터 바인딩을 통해 선택한 날짜를 페이지에 표시할 수 있습니다.

이러한 방식으로 애플릿의 Picker 구성 요소를 사용하여 다양한 선택 기능을 구현하고 다양한 모드 및 속성 설정을 기반으로 특정 요구 사항을 충족할 수 있습니다.

2. 날짜 선택기

속성 이름	유형	기본값	설명하다	최소 버전
값	끈	그 날	선택한 날짜를 "YYYY-MM-DD" 형식으로 나타냅니다.
시작	끈		유효한 날짜 범위의 시작을 나타냅니다. 문자열 형식은 "YYYY-MM-DD"입니다.
끝	끈		유효한 날짜 범위의 끝을 나타내며 문자열 형식은 "YYYY-MM-DD"입니다.
필드	끈	낮	유효한 값은 선택기의 세분성을 나타내는 연, 월, 일입니다.
바인드체인지	이벤트 핸들		값이 변경되면 변경 이벤트가 트리거됩니다. event.detail = {value}

필드에 유효한 값:

값	설명하다
년도	선택기 세분성은 연도입니다.
월	선택기 단위는 월입니다.
낮	선택기 단위는 일수입니다.

3. 실제 전투

3.1 날짜 도구 utils.js 작성

class Util {
    
    

  static dateFormat(fmt, date) {
    
    

   let ret;

   const opt = {
    
    

​    "Y+": date.getFullYear().toString(), // 年

​    "m+": (date.getMonth() + 1).toString(), // 月

​    "d+": date.getDate().toString(), // 日

​    "H+": date.getHours().toString(), // 时

​    "M+": date.getMinutes().toString(), // 分

​    "S+": date.getSeconds().toString() // 秒

​    // 有其他格式化字符需求可以继续添加，必须转化成字符串

   };

   for (let k in opt) {
    
    

​    ret = new RegExp("(" + k + ")").exec(fmt);

​    if (ret) {
    
    

​     fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))

​    };

   };

   return fmt;

  }

 

 }

 

 export {
    
    

  Util

 }

3.2 home.js에 utils.js를 도입하세요

import {
    
    

  Util

} from '../../pages/order/utils.js'

// 在Page({ 中添加以下代码 })

 data: {
    
    
        year: Util.dateFormat("YYYY", new Date()),
        month: Util.dateFormat("mm", new Date()),
        date: Util.dateFormat("YYYY", new Date()) + '-' + Util.dateFormat("mm", new Date())
    },
    bindDateChange: function (event) {
    
    
        console.log('picker发送选择改变，携带值为', event.detail.value)
        const selectedDate = event.detail.value;
        const year = Util.dateFormat("YYYY", new Date(selectedDate));
        const month = Util.dateFormat("mm", new Date(selectedDate));
        this.setData({
    
    
            date: selectedDate,
            year: year,
            month: month,
        })
    },

3.3 home.wxml 코드

<view>
    <view>日期选择器</view>
    <picker mode="date" fields="month" value="YYYY-MM" bindchange="bindDateChange"  end="{
     
     {year}}+'-'+{
     
     {month}}" start="{
     
     {year-5}}">
        <text>{
   
   {year}}年</text><text>{
   
   {month}}月</text>
        <view>{
   
   {date}}</view>
    </picker>
</view>

3.4 최종 효과