小程序vant-weapp的日期選擇器的使用（年月日時分）
話不多說，記錄一下這個框架的使用~小程序使用輕量、可靠的小程序 UI 組件庫 vant-weapp
Github源碼：https://github.com/youzan/vant-weapp
中文文檔：https://youzan.github.io/vant-weapp/#/intro
1：打開微信開發(fā)者工具信粮，填寫自己的appid和項目名稱，選擇不使用云服務趁啸，新建一個項目强缘。
2：右擊在選擇在終端打開
進入項目的根目錄底下，注意不傅，一定要進入根目錄哦旅掂，使用cd ../返回上一級目錄~
3：小程序已經(jīng)支持使用 npm 安裝第三方包，
這里通過 npm 安裝
1访娶、第一步：npm init
2商虐、第二步：npm install --production
3、第三步： npm i @vant/weapp -S --production
或者 npm i vant-weapp -S --production
這里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的區(qū)別
使用npm i vant-weapp安裝的時候崖疤，到時候在在app.json或index.json中引入組件秘车，需要使用這樣的路徑
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
使用npm i @vant/weapp安裝的時候，到時候在在app.json或index.json中引入組件劫哼，需要使用這樣的路徑（推薦叮趴，因為這個可以直接抄文檔，不需要改變引入路徑的~）
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
4：在微信開發(fā)工具執(zhí)行npm 構建权烧，點擊工具里面眯亦，構建npm
構建過程需要等待一會兒伤溉，不要捉急
構建完會生成一個miniprogram_npm文件夾
如果構建完如果編譯報錯，再構建一次就好了
話不多說妻率，來看看小程序vant-weapp的日期選擇器的使用
日期選擇器文檔參照一下
https://youzan.github.io/vant-weapp/#/datetime-picker
5：使用DatetimePicker 時間選擇組件
選擇日期格式如下：
2021-06-25 9:29
參考代碼：
test.wxml
<view>當前選擇：{{currentChoose}}</view>
<button bind:tap="openPicker">打開選擇器</button>
<van-action-sheet show="{{ show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
<van-datetime-picker type="datetime" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:cancel="onCancel"
bind:confirm="onConfirm" bind:change="onChange" />
</van-action-sheet>
test.js
const app = getApp()
Page({
data: {
minHour: 0,
maxHour: 24,
minDate: new Date(1990,1,1).getTime(),
maxDate: new Date(2099, 12, 31).getTime(),
currentDate: new Date().getTime(),
show: false,
currentChoose: ''
},
openPicker() {
this.setData({ show: true })
},
onConfirm(e) {
this.setData({ show: false, currentChoose: this.formatDate(new Date(e.detail)) })
},
onClose() {
this.setData({ show: false })
},
onCancel() {
this.setData({ show: false })
},
formatDate(date) {
let taskStartTime
if (date.getMonth() < 9) {
taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
} else {
taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
}
if (date.getDate() < 10) {
taskStartTime += "0" + date.getDate()
} else {
taskStartTime += date.getDate()
}
taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
this.setData({
taskStartTime: taskStartTime,
})
return taskStartTime;
},
})
test.json
{
"usingComponents": {
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-action-sheet": "@vant/weapp/action-sheet/index"
}
}
結果：
點擊打開選擇器的時候
日期選擇器的組件會從底部彈框彈出
可以選擇自己想要的時間乱顾，然后將時間顯示在頁面上
或者傳遞給后端都可以
根據(jù)自己的需求進行修改~~~
以上能夠使用年月日時分的組件了
有的時候
項目上會遇到這樣的需求
需要將當前的時間默認顯示出來
微信小程序日期選擇器顯示當前系統(tǒng)年月日時分
其實很簡單
在前面的文章里面就已經(jīng)提到了
參考之前寫的文章
我們這里需要用到utils
可以將一些公共的代碼抽離成為一個單獨的 js (utils.js)文件，作為一個模塊;
模塊只有通過 module.exports 或者 exports 才能對外暴露接口宫静。
所以當你在util.js里封裝的方法想要在外部使用的話,必須通過 module.exports 或者 exports 對外暴露
這就和CommonJS 模塊化標準一致
參考一下之前寫的
微信小程序顯示當前系統(tǒng)年月日時分秒
https://blog.csdn.net/qq_36538012/article/details/108143274
1：打開項目里面默認生成的util.js
這里可以看到糯耍，代碼已經(jīng)寫好了，我們只需要引用就行了
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
//const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime
}
2：開始寫代碼
打開文章上面開始寫好的test.wxml的demo囊嘉，寫一個可以顯示時間的標簽
<view>當前選擇：{{currentChoose}}</view>
3:最重要的是index.js的代碼
要引入上面默認的util.js
在調(diào)用函數(shù)時温技，傳入new Date()參數(shù)，返回值是日期和時間
再通過setData更改Page()里面的data扭粱，動態(tài)更新頁面的數(shù)據(jù)
var util = require('../../utils/util.js');
// 調(diào)用函數(shù)時舵鳞，傳入new Date()參數(shù)，返回值是日期和時間
// 再通過setData更改Page()里面的data琢蛤，動態(tài)更新頁面的數(shù)據(jù)
onLoad: function() {
// 調(diào)用函數(shù)時蜓堕，傳入new Date()參數(shù)，返回值是日期和時間
var time = util.formatTime(new Date());
// 再通過setData更改Page()里面的data博其，動態(tài)更新頁面的數(shù)據(jù)
this.setData({
currentChoose: time
});
},
4：demo例子
test.wxml例子
<view>當前選擇：{{currentChoose}}</view>
<button bind:tap="openPicker">打開選擇器</button>
<van-action-sheet show="{{ show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
<van-datetime-picker type="datetime" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:cancel="onCancel"
bind:confirm="onConfirm" bind:change="onChange" />
</van-action-sheet>
test.js例子
var util = require('../../utils/util.js');
const app = getApp()
Page({
data: {
minHour: 0,
maxHour: 24,
minDate: new Date(1990, 1, 1).getTime(),
maxDate: new Date(2099, 12, 31).getTime(),
currentDate: new Date().getTime(),
show: false,
currentChoose: ''
},
onLoad: function() {
// 調(diào)用函數(shù)時套才，傳入new Date()參數(shù)，返回值是日期和時間
var time = util.formatTime(new Date());
// 再通過setData更改Page()里面的data慕淡，動態(tài)更新頁面的數(shù)據(jù)
this.setData({
currentChoose: time
});
},
openPicker() {
this.setData({
show: true
})
},
onConfirm(e) {
this.setData({
show: false,
currentChoose: this.formatDate(new Date(e.detail))
})
},
onClose() {
this.setData({
show: false
})
},
onCancel() {
this.setData({
show: false
})
},
formatDate(date) {
let taskStartTime
if (date.getMonth() < 9) {
taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
} else {
taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
}
if (date.getDate() < 10) {
taskStartTime += "0" + date.getDate()
} else {
taskStartTime += date.getDate()
}
taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
this.setData({
taskStartTime: taskStartTime,
})
return taskStartTime;
},
})
效果顯示
微信小程序日期選擇器顯示當前系統(tǒng)年月日時分
完成
