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 ログの文字化けを解決する方法
推薦する
Reactにおける不変値の説明
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
CentOS7 ファイアウォールとポート関連コマンドの紹介
目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...
RHCE ブリッジング、パスワード不要のログイン、ポート番号の変更の概要
目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...
Tomcat マルチレイヤーコンテナの設計に関する簡単な説明
目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...
IE6 で幅と高さがおかしいバグ
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
最も完全なpackage.json分析
目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...
WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策
解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...
CSS 画面サイズ適応実装例
CSS 画面サイズの適応を実現するには、まず CSS3 @media メディア クエリを導入する必要...
CSS で透明なグラデーション効果を実装するためのサンプルコード
Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...
MySQL mysqldump の使い方の詳しい説明
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法
目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...
Vue での weixin-js-sdk の一般的な使用方法の詳細な説明
リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...
Vueは小さなフォーム検証機能を実装します
この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
Flash での HTML と CSS の適用
Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...
html オプション 無効 選択 選択 無効 オプションの例
コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...