uniapp は日付と時刻の選択機能を実装します

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp のピッカーセレクターのいくつかの使用シナリオ

<<:  XHTML言語のデフォルトCSSスタイル

>>:  Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

推薦する

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Vue+elementを使用してページ上部のタグを実装する方法の詳細な説明

目次1. ページレンダリング2. タグを切り替える3. タグを削除するこのようなタグはどのように記述...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

アクセス速度を上げるためにウェブサイトを最適化する方法の更新

最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...

シームレスなカルーセルを実現するjQueryプラグイン

シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

フレックスとポジションの互換性の詳細な説明マイニングノート

今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ...

Webデザインと制作のテスト問題と参考回答

<br />Web デザインと制作テスト パート I 多肢選択問題 1. 単一選択問題 ...

JavaScriptの擬似配列と配列の使い方と違い

擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...

Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明

目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...

JavaScript プログラムのループ構造の詳細な説明

目次構造を選択ループ構造その間…しながらforループ…のために…で…の…のためにまとめループの終了壊...