この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 プロジェクトのニーズにより、Vant コンポーネント ライブラリを使用しようとしましたが、常に問題が発生し、プラグイン マーケットのプラグインはニーズを完全に満たしていませんでした。関連情報を調べたところ、最終結果は次のようになりました。 まずルートディレクトリにutilフォルダを作成し、dateTimePicker.jsを配置します。 日付時刻ピッカー 関数 withData(param){ パラメータ < 10 ? '0' + パラメータ : '' + パラメータを返します。 } 関数 getLoopArray(開始,終了){ var 開始 = 開始 || 0; var end = end || 1; var 配列 = []; (var i = 開始; i <= 終了; i++) { 配列をプッシュします(withData(i)); } 配列を返します。 } 関数 getMonthDay(年,月){ var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)、配列 = null; スイッチ(月){ ケース '01': ケース '03': ケース '05': ケース '07': ケース '08': ケース '10': ケース '12': 配列 = getLoopArray(1, 31) 壊す; ケース '04': ケース '06': ケース '09': ケース '11': 配列 = getLoopArray(1, 30) 壊す; ケース '02': 配列 = フラグ ? getLoopArray(1, 29) : getLoopArray(1, 28) 壊す; デフォルト: array = '月の形式が正しくありません。再入力してください。 ' } 配列を返します。 } 関数 getNewDateArry(){ // 現在の時刻(年、月、日、時、分、秒)の処理 var newDate = new Date(); var 年 = withData(newDate.getFullYear())、 月 = withData(newDate.getMonth() + 1)、 日付 = withData(newDate.getDate())、 時間 = withData(newDate.getHours())、 minu = withData(newDate.getMinutes()); // seco = withData(newDate.getSeconds()); [年、月、日、時、分]を返します。 } 関数 dateTimePicker(開始年、終了年、日付) { // デフォルトの表示配列とリンク配列宣言を返します var dateTime = [], dateTimeArray = [[],[],[],[],[]]; var start = startYear || 1978; var end = endYear || 2100; //渡された文字列を配列に変換します。let dataArr = date.split(" ")[0].split('/') 時刻をdate.split(" ")[1].split(':')とします。 // デフォルトでデータの表示を開始します。カスタム値が渡された場合は、カスタム時間が使用されます。それ以外の場合は、現在の時間が使用されます...dataArr 配列の分解 var defaultDate = date ? [...dataArr, ...time] : getNewDateArry(); // プロセスリンクリストデータ/*年月日時間分秒*/ dateTimeArray[0] = getLoopArray(開始、終了); 日付時刻配列[1] = getLoopArray(1, 12); dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]); 日付時刻配列[3] = getLoopArray(0, 23); dateTimeArray[4] = getLoopArray(0, 59); // dateTimeArray[5] = getLoopArray(0, 59); //dateTimeArray配列を走査する dateTimeArray.forEach((current,index) => //現在の配列内のdefaultDate[index]値の位置を一致させる dateTime.push(current.indexOf(defaultDate[index])) ); 戻る { 日付時刻配列: 日付時刻配列、 日付時刻: 日付時刻 } } モジュール.エクスポート = { 日付時刻ピッカー: 日付時刻ピッカー、 月日を取得: 月日を取得 } テンプレート <picker mode="multiSelector" :range="dateTimeArray" v-model="dateTime" @change="change" @columnchange="columnchange"> <表示> //disable = "true" は入力を無効にして、クリックしたときにキーボードがポップアップしないようにします <input type="text" disabled="true" v-model="upTower" placeholder="時間を選択してください" placeholder-class="inputPlace" /> </ビュー> </ピッカー> スクリプト部分 // 以前に宣言したクラスを導入します const dateTimePicker = require('@/util/dateTimePicker.js') エクスポートデフォルト{ データ() { 戻る { // 時間セレクタ dateTimeArray: null, 日付時刻: null、 開始年: 2000, 終了年: 2050年、 }; }, オンロード() { // 開始年 startYear と終了年 endYear を渡します //開始表示時間をカスタマイズする let arr = '2018/09/01 13:00' obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear,arr) とします。 this.dateTimeArray = obj.dateTimeArray this.dateTime = obj.dateTime }, メソッド: { //時刻形式 withData(param){ パラメータ < 10 ? '0' + パラメータ : '' + パラメータを返します。 }, 変更(e){ 値 = [] とする e.detail.value.forEach((val,index) => { 値.push(this.withData(val)) }) dateArray = "20" + 値[0] + "-" + 値[1] + "-" + 値[2] + " " + 値[3] + ":" + 値[4]とします。 this.upTower = 日付配列 }, 列の変更(e){ dateArr = this.dateTimeArray とします。 arr = this.dateTime とします //列内のデータをスライドして値を更新します arr[e.detail.column] = e.detail.value //表示する月の日数を更新します(28 または 29 または 30 または 31) dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]) //最後に最新の値をdateTimeArrayに代入します this.dateTimeArray = dateArr this.dateTime = arr }, picker 属性で、range = "dateTimeArray" = "dateTimeArray は 2 次元配列です。長さは列の数を示します。配列内の各項目は各列のデータを示します。これが複数列セレクター表示の重要なポイントです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析
序文:現在、Linux と .Net Core を学習しており、クロスプラットフォームの知識を学んで...
目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...
目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
目次1. パッケージ化コマンドを追加する2. パッケージ化されたコードを実行する3. パッケージ化し...
1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...
目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...
新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...
Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...
フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...