WeChat アプレットの日付と時刻のコンポーネント (年、月、日、時間、分)
|
この記事の例では、WeChatアプレットの日付と時刻コンポーネントの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 写真の通り
最初のステップは、新しいピッカーコンポーネントファイルを作成することです 1. pickerTime.js コンポーネントコードの内容
// コンポーネント/pickerTime/pickerTime.js
成分（{
/**
* コンポーネントプロパティのリスト */
プロパティ:
date: { // プロパティ名 type: null, // タイプ (必須)、現在受け入れられるタイプには、String、Number、Boolean、Object、Array、null (任意のタイプを示します) が含まれます。
value: null // プロパティの初期値（オプション）。指定しない場合は、タイプに応じて選択されます。},
開始日： {
type: null, // 型 (必須)、現在受け入れられる型には、String、Number、Boolean、Object、Array、null (任意の型を示します) が含まれます。
value: null // プロパティの初期値（オプション）。指定しない場合は、タイプに応じて選択されます。},
終了日: {
type: null, // 型 (必須)、現在受け入れられる型には、String、Number、Boolean、Object、Array、null (任意の型を示します) が含まれます。
value: null // プロパティの初期値（オプション）。指定しない場合は、タイプに応じて選択されます。},
無効：
type: null, // 型 (必須)、現在受け入れられる型には、String、Number、Boolean、Object、Array、null (任意の型を示します) が含まれます。
value: false // プロパティの初期値（オプション）。指定しない場合は、タイプに応じて選択されます。},
プレースホルダー:
type: null, // 型 (必須)、現在受け入れられる型には、String、Number、Boolean、Object、Array、null (任意の型を示します) が含まれます。
value: null // プロパティの初期値 (オプション)。指定しない場合は、タイプに基づいて選択されます。}
},
/**
* コンポーネントの初期データ */
データ： {
pickerArray: [], //日付コントロールデータリスト
pickerIndex: [], //日付コントロールによって選択されたインデックス
chooseIndex: [], //日付コントロールは選択されたインデックスを確認します
chooseArray: [], //日付コントロールの後のリストは選択を確認します
stDate: '', // 開始日 enDate: '' // 終了日},
/**
* コンポーネントメソッドのリスト */
メソッド: {
_onInit() {
date = new Date();
if (this.data.date != null) {
str = this.data.date とします。
str = str.replace(/-/g, "/");
date = 新しい Date(str);
}
pickerArray を this.data.pickerArray とします。
// コンソールログ(date.getFullYear());
// デフォルトの選択は 3 年以内です let year = [];
月 = [] とします。
day = [] とします。
時間を[]とします。
除算を [] とします。
startDate = '' とします。
endDate = '' とします
tpData = {} とします。
this.data.startDate != null && this.data.endDate == null の場合 {
// 開始時刻が存在する場合、デフォルトの終了時刻は 2099 に設定されます
開始日 = this._getDefaultDate(this.data.startDate);
終了日 = this._getDefaultDate("2099-12-31 23:59");
tpData = this._getModify(日付、開始日、終了日);
}
this.data.endDate != null && this.data.startDate == null の場合 {
//終了時刻があり開始時刻がない場合、デフォルトの開始時刻は1900に設定されます
開始日 = this._getDefaultDate("1900-01-01 00:00");
終了日 = this._getDefaultDate(this.data.endDate);
tpData = this._getModify(日付、開始日、終了日);
}
this.data.endDate != null かつ this.data.startDate != null の場合 {
開始日 = this._getDefaultDate(this.data.startDate);
終了日 = this._getDefaultDate(this.data.endDate);
tpData = this._getModify(日付、開始日、終了日);
}
// console.log(年);
this.data.startDate == null かつ this.data.endDate == null の場合 {
開始日 = this._getDefaultDate("1901-01-01 00:00");
終了日 = this._getDefaultDate("2099-12-31 23:59");
tpData = this._getModify(日付、開始日、終了日);
}
if (日付 > 終了日 || 日付 < 開始日) {
this.setData({
プレースホルダー: 「デフォルトの日付が時間範囲内ではありません」
})
戻る;
}
// console.log(除算);
ピッカー配列[0] = tpData.year;
ピッカー配列[1] = tpData.month;
ピッカー配列[2] = tpData.day;
ピッカー配列[3] = tpData.time;
ピッカー配列[4] = tpData.division;
mdate = {とします
日付: 日付、
年: date.getFullYear() + ''、
月: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
日: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
時刻: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
除算: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
}
mdate.placeholder = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
this.setData({
ピッカー配列、
ピッカーインデックス: tpData.index,
選択インデックス: tpData.index,
選択配列: ピッカー配列、
プレースホルダー: this.data.placeholder != null ? this.data.placeholder : mdate.placeholder,
stDate: 開始日、
終了日: 終了日
})
// コンソール.log(日付);
//プレースホルダープロパティを設定し、日付を返さずに初期化します。if (this.data.placeholder == null){
this.triggerEvent('onPickerChange', mdate);
}
// console.log(this.data.pickerArray);
// console.log(this._getNumOfDays(2018, 10));
},
/**
*
*/
_getDefaultDate(日付) {
date = date.replace(/-/g, "/");
新しい Date(date) を返します。
},
/**
*
* 開始日、終了日、中間日を取得します * @param {date} newDate デフォルトの日付 * @param {date} startDate 開始日を設定します * @param {date} stopDate 終了日を設定します * @returns data には年、月、日、時間、分の配列が含まれます */
_getModify(新しい日付、開始日付、終了日付) {
データ = {
年： []、
月： []、
日： []、
時間： []、
分割： []、
インデックス:[0,0,0,0,0]
}
nYear = newDate.getFullYear(); とします。
nMonth = newDate.getMonth() + 1 とします。
nDay = newDate.getDate(); とします。
nHours = newDate.getHours(); とします。
nMinutes = newDate.getMinutes(); とします。
tYear = startDate.getFullYear() とします。
tMonth = startDate.getMonth() + 1 とします。
tDay = startDate.getDate(); とします。
tHours = startDate.getHours() とします。
tMinutes = startDate.getMinutes(); とします。
pYear = stopDate.getFullYear() とします。
pMonth = stopDate.getMonth() + 1 とします。
pDay = stopDate.getDate(); とします。
pHours = stopDate.getHours() とします。
pMinutes = stopDate.getMinutes(); とします。
(i = tYear; i <= pYear; i++) の場合 {
data.year.push({ id: i, name: i + "year" });
}
data.index[0] = nYear - tYear;
// 年が同じかどうかを確認し、続行します if (nYear == tYear) {
//終了年を判断して月を割り当てます。終了年が同じ場合は、終了月も割り当てます if (nYear == pYear){
(i = tMonth; i <= pMonth; i++ とします) {
data.month.push({ id: i, name: i + "月" });
}
data.index[1] = nMonth - tMonth < 0 ? 0 : nMonth - tMonth;
(nMonth == tMonth)の場合{
(nMonth == pMonth)の場合{
(i = tDay; i <= pDay; i++ とします) {
data.day.push({ id: i, name: i + "日" });
}
data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
(nDay == tDay)の場合{
(nDay == pDay)の場合{
(i = tHours; i <= pHours; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
(nHours == tHours)の場合{
(nHours == pHours)の場合{
(i = tMinutes; i <= pMinutes; i++ とします) {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
} それ以外 {
(i = tMinutes; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
}
} それ以外 {
(nHours == pHours)の場合{
(i = 0; i <= pMinutes; i++ とします) {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} それ以外 {
(i = tHours; i <= 23; i++) の場合 {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
(nHours == tHours)の場合{
(i = tMinutes; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} それ以外 {
(nDay == pDay)の場合{
(i = 0; i <= pHours; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
(nHours == pHours)の場合{
(i = 0; i <= pMinutes; i++ とします) {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} それ以外 {
dayNum = this._getNumOfDays(nYear, nMonth) とします。
(i = tDay; i <= dayNum; i++) の場合 {
data.day.push({ id: i, name: i + "日" });
}
data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
(nDay == tDay)の場合{
(i = tHours; i <= 23; i++) の場合 {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
(nHours == tHours)の場合{
(i = tMinutes; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} それ以外 {
(nMonth == pMonth)の場合{
(i = 1; i <= pDay; i++) の場合 {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(nDay == pDay)の場合{
(i = 0; i <= pHours; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
(nHours == pHours)の場合{
(i = 0; i <= pMinutes; i++ とします) {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
dayNum = this._getNumOfDays(nYear, nMonth); とします。
(i = 1; i <= dayNum; i++ とします) {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} else{//終了年が異なるため、開始日のみが必要です。終了日は使用されません (let i = tMonth; i <= 12; i++) {
data.month.push({ id: i, name: i + "月" });
}
data.index[1] = nMonth - tMonth < 0 ? 0 : nMonth - tMonth;
(nMonth == tMonth)の場合{
dayNum = this._getNumOfDays(nYear, nMonth) とします。
(i = tDay; i <= dayNum; i++) の場合 {
data.day.push({ id: i, name: i + "日" });
}
data.index[2] = nDay - tDay < 0 ? 0 : nDay - tDay;
(nDay == tDay)の場合{
(i = tHours; i <= 23; i++) の場合 {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
data.index[3] = nHours - tHours < 0 ? 0 : nHours - tHours;
(nHours == tHours)の場合{
(i = tMinutes; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = nMinutes - tMinutes < 0 ? 0 : nMinutes - tMinutes;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
dayNum = this._getNumOfDays(nYear, nMonth) とします。
(i = 1; i <= dayNum; i++ とします) {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
} それ以外 {
(nYear == pYear)の場合{
(i = 1; i <= pMonth; i++ とします) {
data.month.push({ id: i, name: i + "月" });
}
data.index[1] = nMonth - 1;
(nMonth == pMonth)の場合{
(i = 1; i <= pDay; i++) の場合 {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(nDay == pDay)の場合{
(i = 0; i <= pHours; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
(nHours == pHours)の場合{
(i = 0; i <= pMinutes; i++ とします) {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
} それ以外 {
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
dayNum = this._getNumOfDays(nYear, nMonth) とします。
(i = 1; i <= dayNum; i++ とします) {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
} それ以外 {
(i = 1; i <= 12; i++ とします) {
data.month.push({ id: i, name: i + "月" });
}
data.index[1] = nMonth - 1;
dayNum = this._getNumOfDays(nYear, nMonth) とします。
(i = 1; i <= dayNum; i++ とします) {
data.day.push({ id: i, name: i + "日" });
}
データインデックス[2] = nDay - 1;
(i = 0; i <= 23; i++ とします) {
もし（i < 10）{
data.time.push({ id: i, name: "0" + i + "time" });
} それ以外 {
data.time.push({ id: i, name: i + "time" });
}
}
データインデックス[3] = nHours;
// コンソールログ(時間);
(i = 0; i <= 59; i++) の場合 {
もし（i < 10）{
data.division.push({ id: i, name: "0" + i + "分" });
} それ以外 {
data.division.push({ id: i, name: i + "分" });
}
}
data.index[4] = n分;
}
}
データを返す
},
/**
*
* 今月の日数を取得します * @param {number} year
* @param {数値} 月
* @param {number} [day=0] 0 は今月の最終日です * @returns 1-31
*/
_getNumOfDays(年、月、日 = 0) {
新しい Date(年、月、日) を返します。getDate()
},
ピッカー変更: 関数 (e) {
// console.log('ピッカーが選択変更を送信し、値を送信します', e.detail.value)
indexArr = e.detail.value; とします。
const 年 = this.data.pickerArray[0][indexArr[0]].id;
const 月 = this.data.pickerArray[1][indexArr[1]].id;
定数 day = this.data.pickerArray[2][indexArr[2]].id;
const time = this.data.pickerArray[3][indexArr[3]].id;
const 除算 = this.data.pickerArray[4][indexArr[4]].id;
日付を{
日付: 新しい日付(年 + '-' + 月 + '-' + 日 + ' ' + 時刻 + ':' + 除算),
年: 年 + ''
月: 月 < 10 ? '0' + 月: 月 + '',
日: 日 < 10 ? '0' + 日: 日 + ''
時間: 時間 < 10 ? '0' + 時間: 時間 + ''
除算: 除算 < 10 ? '0' + 除算: 除算 + ''
}
date.dateString = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division;
// コンソール.log(日付);
this.setData({
選択インデックス: e.detail.value、
選択配列: this.data.pickerArray、
プレースホルダー: date.dateString
})
this.triggerEvent('onPickerChange', 日付);
},
ピッカー列変更: 関数 (e) {
// console.log('変更された列は', e.detail.column, ', 値は', e.detail.value);
データ = {
ピッカー配列: this.data.pickerArray、
ピッカーインデックス: this.data.pickerIndex
};
//まず変更日を取得し、リスト データを再割り当てします。data.pickerIndex[e.detail.column] = e.detail.value;
cYear = data.pickerArray[0][data.pickerIndex[0]].id;とします。
cMonth = data.pickerArray[1][data.pickerIndex[1]].idとします。
cDay = data.pickerArray[2][data.pickerIndex[2]].id;とします。
cTime = data.pickerArray[3][data.pickerIndex[3]].idとします。
cDivision = data.pickerArray[4][data.pickerIndex[4]].id;とします。
//まず、変更された日付が正しいかどうかを判断する必要があります。日付が間違っていると、日付の混乱などの不明な状況が発生する可能性があります。let daysn = this._getNumOfDays(cYear, cMonth);
// 誤った再割り当て if (cDay > daysn) {
cDay = 日数n;
}
// console.log(cYear + '-' + cMonth + '-' + cDay + ' ' + cTime + ':' + cDivision);
newDate = this._getDefaultDate(cYear + '-' + cMonth + '-' + cDay + ' ' + cTime + ':' + cDivision); とします。
// 変更日が制限内かどうか判断し、そうでない場合は再割り当てします if (newDate > this.data.enDate) {
新しい日付 = this.data.enDate;
}
(newDate < this.data.stDate)の場合{
新しい日付 = this.data.stDate;
}
tpData = this._getModify(newDate、this.data.stDate、this.data.enDate); とします。
data.pickerArray[0] = tpData.year;
data.pickerArray[1] = tpData.month;
データピッカー配列[2] = tpData.day;
データピッカー配列[3] = tpData.time;
data.pickerArray[4] = tpData.division;
data.pickerIndex = tpData.index;
(i = 0; i <= 4; i++ とします) {
(data.pickerArray[i].length - 1 < data.pickerIndex[i]) の場合 {
data.pickerIndex[i] = data.pickerArray[i].length - 1;
}
}
this.setData(データ);
},
ピッカーキャンセル: 関数(e) {
// console.log("キャンセル");
this.setData({
ピッカーインデックス: this.data.chooseIndex、
ピッカー配列: this.data.chooseArray
})
},
},
// 以下は、ベースライブラリバージョン <2.2.3 との互換性を維持できる古い定義方法です attached() {
// コンポーネント インスタンスがページ ノード ツリーに入るときに実行 // コンポーネント インスタンスがページ ノード ツリーに入るときに実行 // this._onInit();
},
準備ができて（） {
// console.log('準備完了外部ノードを入力してください =', this.data.date);
this._onInit();
},
// 以下は新しいメソッドです>=2.2.3
生涯:
添付（） {
// コンポーネント インスタンスがページ ノード ツリーに入るときに実行されます // this._onInit();
},
切り離された() {
// コンポーネントインスタンスがページノードツリーから削除されたときに実行されます},
準備ができて（） {
// console.log('準備完了ノードを入力してください=', this.data.date);
this._onInit();
}
}
})2.pickerTime.wxml コンテンツ
<!--component/pickerTime/pickerTime.wxml-->
<表示>
<picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
<表示>
{{プレースホルダー}}
</ビュー>
</ピッカー>
</ビュー>ページ内での使用 1.demo.jsonにコンポーネントを導入する
{
"navigationBarTitleText": "デモ",
"コンポーネントの使用": {
"pickerTime": "/components/pickerTime/pickerTime"
}
}2. ページでwxmlを使用する
<pickerTime placeholder="{{placeholder}}" date="{{date}}" bind:onPickerChange="onPickerChange"
開始日="{{開始日}}" 終了日="{{終了日}}">
</ピッカー時間>3.デモ
データ：{
日付: '2019-01-01 13:37',
開始日: '2019-01-01 12:37',
終了日: '2029-03-12 12:38',
プレースホルダー: 「時間を選択してください」
},
onPickerChange: 関数(e) {
this.setData({
date: e.detail.dateString //選択されたデータ})
},
toDouble: 関数 (数値) {
if (num >= 10) { // 10より大きい
数値を返します。
} それ以外の場合: //0-9
'0' + 数値を返す
}
},
getToday: 関数 () {
date = new Date();
年 = date.getFullYear();
月 = date.getMonth() + 1 とします。
day = date.getDate() とします。
年 + '-' + this.toDouble(月) + '-' + this.toDouble(日) を返します
},
//ページの読み込みをリッスンする onLoad: function (options) {
dayTime を this.getToday() とします。
dayHour = "18:00"とします。
終了時間1 = dayTime + " " + dayHour;
this.setData({
日付: 終了時刻1
})
},以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: gorm で MySql データベースを操作する方法
>>: Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法
推薦する
Visual Studio Code + Reactをベースに開発環境を構築するプロセス
開発環境ウィンドウ開発ツール Visual Studio Codeノードのインストールとnpm Wi...
Vue SPA ファースト スクリーン最適化ソリューション
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
MySQLでテーブル名を変更する方法と注意すべき点
目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...
JS 非同期コードユニットテストの魔法 Promise
目次序文プロミスチェーンMDN エラー連鎖デフォルト処理略語非同期待機序文この記事を書いた理由は、ユ...
Dockerカスタムネットワークの詳細な紹介
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
CSS設定div背景画像実装コード
コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...
VueはTeleportをベースにModalコンポーネントを実装します
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
nginx+FastDFS を使ってファイル管理システムを段階的に構築する
目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...
VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します
前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...
HTML マーキー文字フラグメントのスクロール
その特性は次のとおりです。方向アクティブな字幕のスクロール方向を設定するコードは次のとおりです。 &...
見落としがちなVue.jsのAPIを詳しく解説
目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...
CentOS 6 ZLMediaKit のコンパイルとインストール分析
Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...
JS関数の呼び出し、適用、バインドの超詳細な方法
目次JS 関数呼び出し、適用、バインドメソッド1. call() メソッド1. call() メソッ...
MySQL の一般的なログの概要
序文： MySQL システムには、さまざまな種類のログが存在します。さまざまなログにはそれぞれ独自の...
Linuxシステムのログの詳細な紹介
目次1. ログ関連サービス2. システム内の共通ログファイル1. ログ関連サービスCentOS 6....