TP5.1+レイウイタイムレンジ設定方法
最近プロジェクトを作成するときに、開始時刻と終了時刻が関連しているという問題が発生しました。終了時刻の選択範囲は、最小開始時刻と開始時刻から 90 日後の最大時刻です。ここで使用します これは、layui プラグインによって取得された日付です。日付範囲を設定できる 2 つのパラメーター min と max がそれぞれあります;
コードは次のとおりです:
layui.use('laydate', function(){ var laydate = layui.laydate; //限定可选日期 var ins22 = laydate.render({ elem: '#test-limit1' ,min: '2016-10-14' ,max: '2080-10-14' }); });
ただし、最大値と最小値を取得する方法 の値のとき、問題が発生しました。ラユイの公式文書を何度も調べ、何度も試みた結果、最終的にこの問題を解決したので、皆さんと共有します:
a変数の現在時刻と最小時刻、最大時刻を定義します
var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
b. 現在選択されている時刻に従って最大値と最小値を再割り当てします
取得するにはmax
と min
については、まず時間の変換単位を理解する必要があります。一般的な考え方は、基本的な変換単位は時間に基づいており、1 時間は 3600 秒です。ラウイはミリ秒単位で計算されます。次に、3600 に 1000 を掛けます。1 日は 24 時間で、合計は 90 日なので、90*24*3600*1000
.
となります。開始時刻を選択した後 done : function (value, date)
value の値は現在選択されている時刻です。この値をタイムスタンプに変換します: var date1 = new Date(value).getTime( );
90 日後のタイムスタンプは次のとおりです: var date2 = date1 90 * 24 * 3600 * 1000;
次に、取得した時刻を年に変換します。月と日:
var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() };
取得した値を終了時刻の最小値と最大値に割り当てます:
end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1;
したがって、完全なコードは次のとおりです:
var start = laydate.render({ elem: '#bx_start', type: 'date', max: max, min: min, showBottom: false, btns: ['clear', 'confirm'], done: function (value, date) { var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳 var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间 var date3 = new Date(date2); var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() }; end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1; } });
c. 最小値と最大値を取得します 終了時刻を通過します
var end = laydate.render({ elem: '#bx_end', type: 'date', max: max, min: min, showBottom: false, done: function (value, date) { if ($.trim(value) == '') { var curDate = new Date(); date = { 'date': curDate.getDate(), 'month': curDate.getMonth() + 1, 'year': curDate.getFullYear() }; } start.config.max = date; start.config.max.month = date.month - 1; } });
以下は完全なコードです
<script> layui.use(['form','layedit', 'laydate','layer','element'], function() { $ = layui.jquery; layer = layui.layer; var form = layui.form; layedit = layui.layedit; laydate = layui.laydate; //定义变量当前时间、最小时间、最大时间 var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2); var start = laydate.render({ elem: '#bx_start', type: 'date', max: max, min: min, showBottom: false, btns: ['clear', 'confirm'], done: function (value, date) { var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳 var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的 var date3 = new Date(date2); var date5 = { &#39;date&#39;: date3.getDate(), &#39;month&#39;: date3.getMonth() + 1, &#39;year&#39;: date3.getFullYear() }; end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1; } }); var end = laydate.render({ elem: &#39;#bx_end&#39;, type: &#39;date&#39;, max: max, min: min, showBottom: false, done: function (value, date) { if ($.trim(value) == &#39;&#39;) { var curDate = new Date(); date = { &#39;date&#39;: curDate.getDate(), &#39;month&#39;: curDate.getMonth() + 1, &#39;year&#39;: curDate.getFullYear() }; } start.config.max = date; start.config.max.month = date.month - 1; } }); }); </script>
おすすめ関連記事: "TP5.1 画像にウォーターマーク機能を追加します >>TP5.1 レイウイは列番号呼び出しを実装します>>最新の 10 の thinkphp ビデオ チュートリアル >>
以上がTP5.1+レイウイタイムレンジ設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。

アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。

layui を実行するには、次の手順を実行します: 1.layui スクリプトをインポートします; 2.layui を初期化します; 3.layui コンポーネントを使用します; 4.layui スタイルをインポートします (オプション); 5. スクリプトの互換性を確認し、その他の考慮事項に注意してください。これらの手順により、layui の機能を使用して Web アプリケーションを構築できます。

layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンド フレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティ サポートが含まれます。 layui は、管理バックエンド システム、電子商取引 Web サイト、モバイル アプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。

layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエスト オブジェクトを作成し、リクエスト パラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。

layui と vue はフロントエンド フレームワークであり、layui は UI コンポーネントとツールを提供する軽量ライブラリであり、vue は UI コンポーネント、状態管理、データ バインディング、ルーティングなどの機能を提供する包括的なフレームワークです。 layui はモジュール型アーキテクチャに基づいており、vue はコンポーネント化されたアーキテクチャに基づいています。 lauiui には小規模なエコシステムがあり、vue には大規模でアクティブなエコシステムがあります。 Lauiui の学習曲線は低く、vue の学習曲線は急です。 Layui は小規模なプロジェクトや UI コンポーネントの迅速な開発に適しており、vue は大規模なプロジェクトや豊富な機能を必要とするシナリオに適しています。
