微信小程序自定義日期選擇器
更新時間：2022年01月06日 07:50:31 作者：高質量CV工程師
這篇文章主要為大家詳細介紹了微信小程序自定義日期選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下<BR>
日期選擇器是我們在寫項目的過程中經(jīng)常遇到的，有需要標題的選擇器，也有不需要標題的選擇器
今天給大家?guī)硪粋€自定義的時間選擇器，廢話不多說，直接上代碼
第一步：先創(chuàng)建一個picker的文件夾
第二步 ：在wxml中寫布局樣式
<!--picker/picker.wxml-->
<view class="full-box {{isOpen?'cur':''}}">
?? ?<!--<view class="modal" bindtap="tapModal"></view>-->
?? ?<view class="picker">
?? ??? ?<view class="picker-header">
?? ??? ??? ?<view bindtap="cancle" >
?? ??? ??? ??? ?<text>{{cancelText}}</text>
?? ??? ??? ?</view>
?? ??? ??? ?<text style="font-weight: bold;">{{titleText}}</text>
?? ??? ??? ?<view bindtap="sure">
?? ??? ??? ??? ?<text ? style="color:aqua;">{{sureText}}</text>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ??? ?<picker-view
?? ??? ??? ?value="{{value}}"
?? ??? ??? ?class="picker-content"
?? ??? ??? ?bindpickstart="_bindpickstart"
?? ??? ??? ?bindchange="_bindChange"
?? ??? ??? ?bindpickend="_bindpickend"
?? ??? ??? ?indicator-style="{{indicatorStyle}}"
?? ??? ??? ?mask-style="{{maskStyle}}"
?? ??? ?>
?? ??? ??? ?<picker-view-column wx:for="{{columnsData}}" wx:key="{{index}}">
?? ??? ??? ??? ?<view wx:for="{{item}}" wx:for-item="itemIn" class="picker-line" wx:key="{{index}}">
?? ??? ??? ??? ??? ?<text class="line1">{{isUseKeywordOfShow?itemIn[keyWordsOfShow]:itemIn}}</text>
?? ??? ??? ??? ?</view>
?? ??? ??? ?</picker-view-column>
?? ??? ?</picker-view>
?? ?</view>
</view>第三步：wxss中添加樣式
/* picker/picker.wxss */
.full-box{
?? ?position: fixed;
?? ?left: 0;
?? ?right: 0;
?? ?bottom: 0;
?? ?top: 0;
?? ?z-index: 9999;
?? ?opacity: 0;
?? ?background:rgba(0,0,0,.4);
?? ?transition:all .4s ease-in-out 0;
?? ?pointer-events:none;
}
.full-box.cur{
?? ?opacity:1;
?? ?pointer-events:auto
}
?
.modal{
?? ?position: absolute;
?? ?width: 100%;
?? ?height: 50%;
?? ?bottom:-50%;
?? ?left: 0;
?? ?background: transparent;
?? ?transition:all .4s ease-in-out 0;
}
?
.picker{
?? ?position: absolute;
?? ?width: 100%;
?? ?height: 235px;
?? ?bottom: -235px;
?? ?left: 0;
?? ?background: #fff;
?? ?display: flex;
?? ?flex-direction: column;
?? ?transition:all .4s ease-in-out 0;
}
?
.cur .picker{
?? ?bottom:0;
}
.cur .modal{
?? ?bottom:50%;
}
.picker-line{
?? ?display: flex;
?? ?justify-content: center;
?? ?align-items: center;
}
.picker-header {
?? ?height: 20%;
?? ?box-sizing: border-box;
?? ?padding: 0 20rpx;
?? ?display: flex;
?? ?justify-content: space-between;
?? ?align-items: center;
?? ?border-bottom: 1px solid #eeeeee;
}
.picker-header view {
?? ?height: 100%;
?? ?display: flex;
?? ?justify-content: center;
?? ?align-items: center;
}
.picker-header view text{
?? ?font-size: 36rpx;
}
.picker-content {
?? ?flex-grow: 1;
}
.line1{
?? ?overflow: hidden;
?? ?text-overflow: ellipsis;
?? ?white-space: nowrap;
?? ?lines:1
}第四步：在js中寫組件的屬性
// picker/picker.js
import { isPlainObject } from './tool'
?
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? scrollType: {
? ? ? type: String,
? ? ? value: 'normal'// "link": scroll間聯(lián)動 ?"normal": scroll相互獨立
? ? },
? ? listData: {
? ? ? type: Array,
? ? ? value: [],
? ? ? observer: function(newVal) {
? ? ? ? if (newVal.length === 0 || this._compareDate()) return
? ? ? ? this._setTempData()
? ? ? ? const tempArr = [...new Array(newVal.length).keys()].map(() => 0)
? ? ? ? this.data.lastValue = this.data.tempValue = tempArr
? ? ? ? this._setDefault()
?
? ? ? ? // let {defaultPickData} = this.properties;
? ? ? ? // if(newVal.length === 0) return;
? ? ? ? //
? ? ? ? // this._setDefault(newVal, defaultPickData)
? ? ? }
? ? },
? ? defaultPickData: {
? ? ? type: Array,
? ? ? value: [],
? ? ? observer: function(newVal) {
? ? ? ? if (newVal.length === 0 || this._compareDate()) return
? ? ? ? this._setTempData()
? ? ? ? this._setDefault()
? ? ? }
? ? },
? ? keyWordsOfShow: {
? ? ? type: String,
? ? ? value: 'name'
? ? },
? ? isShowPicker: {
? ? ? type: Boolean,
? ? ? value: false,
? ? ? observer: function(newVal) {
? ? ? ? if (newVal) {
? ? ? ? ? this._openPicker()
? ? ? ? } else {
? ? ? ? ? this._closePicker()
? ? ? ? }
? ? ? }
? ? },
? ? titleText: {// 標題文案
? ? ? type: String,
? ? ? value: '請選擇到館日期'
? ? },
? ? cancelText: {// 取消按鈕文案
? ? ? type: String,
? ? ? value: '取消'
? ? },
? ? sureText: {// 確定按鈕文案
? ? ? type: String,
? ? ? value: '確定'
? ? },
? },
?
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? columnsData: [],
? ? value: [],
? ? backData: [],
? ? height: 0,
? ? isOpen: false,
? ? isUseKeywordOfShow: false,
? ? scrollEnd: true, // 滾動是否結束
? ? lastValue: [], // 上次各個colum的選擇索引
? ? tempValue: [],
? ? isFirstOpen: true,
? ? onlyKey: '',
? ? defaultPickDataTemp: '',
? ? listDataTemp: ''
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? tapModal() {
? ? ? this.properties.isShowPicker = false
? ? ? this._closePicker()
? ? },
? ? cancle() {
? ? ? this.triggerEvent('cancle')
? ? ? this._closePicker()
? ? },
? ? sure() {
? ? ? const { scrollEnd, tempValue } = this.data
? ? ? if (!scrollEnd) return
? ? ? const backData = this._getBackDataFromValue(tempValue)
? ? ? this.setData({
? ? ? ? backData
? ? ? })
? ? ? this.triggerEvent('sure', {
? ? ? ? choosedData: backData,
? ? ? ? choosedIndexArr: tempValue
? ? ? })
? ? ? this._closePicker()
? ? },
? ? _bindChange(e) {
? ? ? const { scrollType } = this.properties
? ? ? const { lastValue } = this.data
? ? ? let val = e.detail.value
? ? ? switch (scrollType) {
? ? ? ? case 'normal':
? ? ? ? ? this.data.tempValue = val.concat()
? ? ? ? ? this.data.tempValue = val.concat()
? ? ? ? ? break
? ? ? ? case 'link':
? ? ? ? ? // let column_02 = this._getColumnData(this.properties.listData[val[0]].children);
? ? ? ? ? // let column_03 = this._getColumnData(this.properties.listData[val[0]].children[val[1]].children);
? ? ? ? ? var tempArray = []
? ? ? ? ? if (val.length > 1) {
? ? ? ? ? ? val.slice(0, val.length - 1).reduce((t, c, i) => {
? ? ? ? ? ? ? const v = t[c].children
? ? ? ? ? ? ? tempArray.push(this._getColumnData(v))
? ? ? ? ? ? ? return v
? ? ? ? ? ? }, this.properties.listData)
? ? ? ? ? }
? ? ? ? ? // let columnsData = [this.data.columnsData[0],column_02,column_03];
? ? ? ? ? var columnsData = [this.data.columnsData[0], ...tempArray]
?
? ? ? ? ? // 設置value關聯(lián)
? ? ? ? ? var compareIndex = this._getScrollCompareIndex(lastValue, val)
? ? ? ? ? if (compareIndex > -1) {
? ? ? ? ? ? let tempI = 1
? ? ? ? ? ? while (val[compareIndex + tempI] !== undefined) {
? ? ? ? ? ? ? val[compareIndex + tempI] = 0
? ? ? ? ? ? ? tempI++
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? val = this._validate(val)
? ? ? ? ? this.data.lastValue = val.concat()
? ? ? ? ? this.data.tempValue = val.concat()
? ? ? ? ? this.setData({
? ? ? ? ? ? columnsData
? ? ? ? ? ? // value: val
? ? ? ? ? })
? ? ? }
? ? },
? ? _validate(val) {
? ? ? const { columnsData } = this.data
? ? ? columnsData.forEach((v, i) => {
? ? ? ? if (columnsData[i].length - 1 < val[i]) {
? ? ? ? ? val[i] = columnsData[i].length - 1
? ? ? ? }
? ? ? })
? ? ? this.setData({
? ? ? ? value: val
? ? ? })
? ? ? return val
? ? },
? ? _bindpickend() {
? ? ? this.data.scrollEnd = true
? ? },
? ? _bindpickstart() {
? ? ? this.data.scrollEnd = false
? ? },
? ? _openPicker() {
? ? ? if (!this.data.isFirstOpen) {
? ? ? ? if (this.properties.listData.length !== 0) {
? ? ? ? ? this._setDefault(this._computedBackData(this.data.backData))
? ? ? ? }
? ? ? }
? ? ? this.data.isFirstOpen = false
? ? ? this.setData({
? ? ? ? isOpen: true
? ? ? })
? ? },
? ? _closePicker() {
? ? ? this.setData({
? ? ? ? isOpen: false
? ? ? })
? ? },
? ? _getColumnData(arr) {
? ? ? return arr.map((v) => this._fomateObj(v))
? ? },
? ? _fomateObj(o) {
? ? ? const tempO = {}
? ? ? for (const k in o) {
? ? ? ? k !== 'children' && (tempO[k] = o[k])
? ? ? }
? ? ? return tempO
? ? },
? ? _getScrollCompareIndex(arr1, arr2) {
? ? ? let tempIndex = -1
? ? ? for (let i = 0, len = arr1.length; i < len; i++) {
? ? ? ? if (arr1[i] !== arr2[i]) {
? ? ? ? ? tempIndex = i
? ? ? ? ? break
? ? ? ? }
? ? ? }
? ? ? return tempIndex
? ? },
? ? // 根據(jù)id獲取索引
? ? _getIndexByIdOfObject(listData, idArr, key, arr) {
? ? ? if (!Array.isArray(listData)) return
? ? ? for (let i = 0, len = listData.length; i < len; i++) {
? ? ? ? if (listData[i][key] === idArr[arr.length][key]) {
? ? ? ? ? arr.push(i)
? ? ? ? ? return this._getIndexByIdOfObject(listData[i].children, idArr, key, arr)
? ? ? ? }
? ? ? }
? ? },
? ? _setDefault(inBackData) {
? ? ? const { scrollType } = this.properties
? ? ? let { listData, defaultPickData } = this.properties
?
? ? ? const { lastValue } = this.data
? ? ? if (inBackData) {
? ? ? ? defaultPickData = inBackData
? ? ? }
? ? ? let backData = []
? ? ? switch (scrollType) {
? ? ? ? case 'normal':
? ? ? ? ? if (isPlainObject(listData[0][0])) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? isUseKeywordOfShow: true
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? if (Array.isArray(defaultPickData) && defaultPickData.length > 0) {
? ? ? ? ? ? backData = listData.map((v, i) => v[defaultPickData[i]])
? ? ? ? ? ? this.data.tempValue = defaultPickData
? ? ? ? ? ? this.data.lastValue = defaultPickData
? ? ? ? ? } else {
? ? ? ? ? ? backData = listData.map((v) => v[0])
? ? ? ? ? }
? ? ? ? ? this.setData({
? ? ? ? ? ? columnsData: listData,
? ? ? ? ? ? backData: backData,
? ? ? ? ? ? value: defaultPickData
? ? ? ? ? })
? ? ? ? ? break
? ? ? ? case 'link':
? ? ? ? ? // let column_01 = this._getColumnData(newVal);
? ? ? ? ? // let column_02 = this._getColumnData(newVal[0].children);
? ? ? ? ? // let column_03 = this._getColumnData(newVal[0].children[0].children);
? ? ? ? ? // let columnsData = [column_01,column_02,column_03];
? ? ? ? ? var columnsData = []
? ? ? ? ? // 如果默認值
? ? ? ? ? if (Array.isArray(defaultPickData) && defaultPickData.length > 0 && defaultPickData.every((v, i) => isPlainObject(v))) {
? ? ? ? ? ? const key = this.data.onlyKey = Object.keys(defaultPickData[0])[0]
?
? ? ? ? ? ? const arr = []
?
? ? ? ? ? ? this._getIndexByIdOfObject(listData, defaultPickData, key, arr)
?
? ? ? ? ? ? defaultPickData = arr
? ? ? ? ? ? let tempI = 0
? ? ? ? ? ? do {
? ? ? ? ? ? ? lastValue.push(defaultPickData[tempI])
? ? ? ? ? ? ? columnsData.push(this._getColumnData(listData))
? ? ? ? ? ? ? listData = listData[defaultPickData[tempI]].children
? ? ? ? ? ? ? tempI++
? ? ? ? ? ? } while (listData)
? ? ? ? ? ? backData = columnsData.map((v, i) => v[defaultPickData[i]])
? ? ? ? ? ? // 如果沒有默認值
? ? ? ? ? } else {
? ? ? ? ? ? this.data.onlyKey = this.properties.keyWordsOfShow || 'name'
? ? ? ? ? ? do {
? ? ? ? ? ? ? lastValue.push(0)
? ? ? ? ? ? ? columnsData.push(this._getColumnData(listData))
? ? ? ? ? ? ? listData = listData[0].children
? ? ? ? ? ? } while (listData)
? ? ? ? ? ? backData = columnsData.map((v) => v[0])
? ? ? ? ? }
? ? ? ? ? this.data.tempValue = defaultPickData
? ? ? ? ? this.data.lastValue = defaultPickData
? ? ? ? ? this.setData({
? ? ? ? ? ? isUseKeywordOfShow: true,
? ? ? ? ? ? columnsData,
? ? ? ? ? ? backData
? ? ? ? ? })
? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? value: defaultPickData
? ? ? ? ? ? })
? ? ? ? ? }, 0)
? ? ? ? ? break
? ? ? }
? ? },
? ? _computedBackData(backData) {
? ? ? const { scrollType, listData } = this.properties
? ? ? const { onlyKey } = this.data
? ? ? if (scrollType === 'normal') {
? ? ? ? return backData.map((v, i) => listData[i].findIndex((vv, ii) => this._compareObj(v, vv)))
? ? ? } else {
? ? ? ? const t = backData.map((v, i) => {
? ? ? ? ? const o = {}
? ? ? ? ? o[onlyKey] = v[onlyKey]
? ? ? ? ? return o
? ? ? ? })
?
? ? ? ? return t
? ? ? }
? ? },
? ? _compareObj(o1, o2) {
? ? ? const { keyWordsOfShow } = this.properties
? ? ? if (typeof o1 !== 'object') {
? ? ? ? return o1 === o2
? ? ? } else {
? ? ? ? return o1[keyWordsOfShow] === o2[keyWordsOfShow]
? ? ? }
? ? },
? ? _getBackDataFromValue(val) {
? ? ? let tempArr = []
? ? ? if (val.length > 0) {
? ? ? ? tempArr = this.data.columnsData.reduce((t, v, i) => {
? ? ? ? ? return t.concat(v[val[i]])
? ? ? ? }, [])
? ? ? } else {
? ? ? ? tempArr = this.data.columnsData.map((v, i) => v[0])
? ? ? }
? ? ? return tempArr
? ? },
? ? _compareDate() { // 完全相等返回true
? ? ? const { defaultPickDataTemp, listDataTemp } = this.data
? ? ? const { defaultPickData, listData } = this.properties
?
? ? ? return defaultPickDataTemp === defaultPickData && listDataTemp === listData
? ? },
? ? _setTempData() {
? ? ? const { defaultPickData, listData } = this.properties
? ? ? this.data.defaultPickDataTemp = defaultPickData
? ? ? this.data.listDataTemp = listData
? ? }
? }
})第五步：創(chuàng)建一個tool.js文件
function _typeof(obj) {
? return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
function isString(obj) { //是否字符串
? return _typeof(obj) === 'string'
}
function isPlainObject(obj) {
? return _typeof(obj) === 'object';
}
module.exports = {
? isString,
? isPlainObject
}第六步：在所需的頁面的json中進行引用
{
? "usingComponents": {
? ? "picker": "../../picker/picker"
? }
}第七步：在所需的頁面的wxml中寫入布局
?<button bindtap="showPicker_11">時間的五列聯(lián)動picker</button>
<view>選擇數(shù)據(jù)：{{picker_11_data}}</view>
<view>選擇索引：{{picker_11_index}}</view>
<picker isShowPicker="{{isShow_11}}" keyWordsOfShow="name" bindsure="sureCallBack_11" bindcancle="cancleCallBack_11" scrollType="link" listData="{{listData_11}}"></picker>第八步：在所需的頁面的js中調用我們的自定義選擇器
// pages/index/index.js
import { times } from './time.js';
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? isShow_11: false,
? ? listData_11:times,
? ? picker_11_data:[],
? },
? onLoad () {
? ? setTimeout(() => {
? ? ? this.setData({
? ? ? ? defaultPickData_08:[
? ? ? ? ? {code:'110000'},{code:'110100'},{code:'110101'}
? ? ? ? ]
? ? ? })
? ? },3000)
? },
?
? showPicker_11: function () {
? ? this.setData({
? ? ? isShow_11: true,
? ? })
?
? },
?
? sureCallBack_11 (e) {
? ? let data = e.detail
? ? console.log("data",data);
? ? this.setData({
? ? ? isShow_11: false,
? ? ? picker_11_data: JSON.stringify(e.detail.choosedData),
? ? ? picker_11_index:JSON.stringify(e.detail.choosedIndexArr)
?
? ? })
? },
? cancleCallBack_11 () {
? ? this.setData({
? ? ? isShow_11: false
? ? })
? },
?
})第九步：創(chuàng)建一個time.js的文件
const times =[ {
? name:'2021年',
? id:1,
? children:[
? ? {
? ? ? name:'1月',
? ? ? id:11,
? ? ? children:[
? ? ? ? {
? ? ? ? ? name:'1日',
? ? ? ? ? id:111,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1111,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'2日',
? ? ? ? ? id:112,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'3日',
? ? ? ? ? id:113,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'小',
? ? ? ? ? ? ? id:1131,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'大',
? ? ? ? ? ? ? id:1132
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? },
? ? {
? ? ? name:'2月',
? ? ? id:12,
? ? ? children:[
? ? ? ? {
? ? ? ? ? name:'1日',
? ? ? ? ? id:121,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'2日',
? ? ? ? ? id:122,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'3日',
? ? ? ? ? id:123,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? }
? ]
},
{
? name:'2022年',
? id:1,
? children:[
? ? {
? ? ? name:'1月',
? ? ? id:11,
? ? ? children:[
? ? ? ? {
? ? ? ? ? name:'1日',
? ? ? ? ? id:111,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1111,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'2日',
? ? ? ? ? id:112,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'3日',
? ? ? ? ? id:113,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'小',
? ? ? ? ? ? ? id:1131,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'大',
? ? ? ? ? ? ? id:1132
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? },
? ? {
? ? ? name:'2月',
? ? ? id:12,
? ? ? children:[
? ? ? ? {
? ? ? ? ? name:'1日',
? ? ? ? ? id:121,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'2日',
? ? ? ? ? id:122,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'3日',
? ? ? ? ? id:123,
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'1時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'1分',
? ? ? ? ? ? ? ? ? id:11111,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name:'2分',
? ? ? ? ? ? ? ? ? id:11112,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name:'2時',
? ? ? ? ? ? ? id:1121,
? ? ? ? ? ? ??
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? }
? ]
},]
module.exports = {
? times,
}完成上述步驟后，一個自定義的日期選擇器就完成了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了es6 filter() 數(shù)組過濾方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
所有瀏覽器都支持該功能IE瀏覽器不能低于IE10.整個CORS通信過程都是瀏覽器自動完成不需要用戶參與。對于開發(fā)者來說CORS通信與同源的AJAX通信沒有差別代碼完全一樣瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源就會自動添加一些附加的頭信息有時還會多出一次附加的請求，但用戶不會有感覺。2016-04-04
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了JS+cookie實現(xiàn)購物評價五星好評功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
layui 地區(qū)三級聯(lián)動 form select 渲染的實例
今天小編就為大家分享一篇layui 地區(qū)三級聯(lián)動 form select 渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
有關script注入想必大家也有所了解，在本文將為大家介紹下如何屏蔽script注入，下面有個不錯的示例大家可以感受下2013-11-11
在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項的順序,本文將介紹如何使用原生JavaScript實現(xiàn)這一功能,需要的可以了解下2024-01-01
javascript圓盤抽獎程序實現(xiàn)原理和完整代碼例子
這篇文章主要介紹了javascript圓盤抽獎程序實現(xiàn)原理和完整代碼例子,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
layui實現(xiàn)下拉復選功能的例子(包括數(shù)據(jù)的回顯與上傳)
今天小編大家分享一篇layui實現(xiàn)下拉復選功能的例子(包括數(shù)據(jù)的回顯與上傳)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09