TP5.1+レイウイタイムレンジ設定方法

XuPing.Yang
リリース: 2021-08-12 09:03:22
オリジナル
1567 人が閲覧しました

最近プロジェクトを作成するときに、開始時刻と終了時刻が関連しているという問題が発生しました。終了時刻の選択範囲は、最小開始時刻と開始時刻から 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. 現在選択されている時刻に従って最大値と最小値を再割り当てします

取得するにはmaxmin については、まず時間の変換単位を理解する必要があります。一般的な考え方は、基本的な変換単位は時間に基づいており、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([&#39;form&#39;,&#39;layedit&#39;, &#39;laydate&#39;,&#39;layer&#39;,&#39;element&#39;], function() {
       $ = layui.jquery;
       layer = layui.layer;
       var form = layui.form;
       layedit = layui.layedit;
       laydate = layui.laydate;
//定义变量当前时间、最小时间、最大时间
       var now = new Date();
       var min = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 1) + &quot;-&quot; + (now.getDate() + 1);
       var max = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 2) + &quot;-&quot; + (now.getDate() + 2);
       var start = laydate.render({
           elem: &#39;#bx_start&#39;,
           type: &#39;date&#39;,
           max: max,
           min: min,
           showBottom: false,
           btns: [&#39;clear&#39;, &#39;confirm&#39;],
           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 = {
                   &amp;#39;date&amp;#39;: date3.getDate(),
                   &amp;#39;month&amp;#39;: date3.getMonth() + 1,
                   &amp;#39;year&amp;#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: &amp;#39;#bx_end&amp;#39;,
           type: &amp;#39;date&amp;#39;,
           max: max,
           min: min,
           showBottom: false,
           done: function (value, date) {
               if ($.trim(value) == &amp;#39;&amp;#39;) {
                   var curDate = new Date();
                   date = {
                       &amp;#39;date&amp;#39;: curDate.getDate(),
                       &amp;#39;month&amp;#39;: curDate.getMonth() + 1,
                       &amp;#39;year&amp;#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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート