ライユイ時間選択ボックスの紹介

リリース: 2020-02-06 16:55:54
転載
9393 人が閲覧しました

ライユイ時間選択ボックスの紹介

Layui の時刻形式入力ボックス:

html コード:

<div class="layui-inline" style="width: fit-content;">
     <label class="layui-form-label" style="width: fit-content;">选择日期:</label>
     <div class="layui-input-inline" style="width: 150px">
         <input type="text" name="beginDate" id="beginDate" lay-verify="datetime" class="layui-input">
     </div>
     --
     <div class="layui-form-mid">-</div>
         <div class="layui-input-inline" style="width: 150px">
         <input type="text" name="endDate" id="endDate" lay-verify="datetime" class="layui-input">
     </div>
</div>
ログイン後にコピー

js コード:

layui.use([&#39;layer&#39;, &#39;form&#39;, &#39;table&#39;, &#39;laydate&#39;], function () {
    var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate,
                table = layui.table;
 
    var beginDate = laydate.render({//渲染开始时间选择
        elem: &#39;#beginDate&#39;, //通过id绑定html中插入的start
        type: &#39;datetime&#39;,
        max: "2099-12-31 23:59:59",//设置一个默认最大值
        done: function (value, dates) {
                endDate.config.min = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                };
        }
    });
    var endDate = laydate.render({//渲染结束时间选择
        elem: &#39;#endDate&#39;,//通过id绑定html中插入的end
        type: &#39;datetime&#39;,
        min: "1970-1-1 00:00:00",//设置min默认最小值
        done: function (value, dates) {
                beginDate.config.max = {
                    year: dates.year,
                    month: dates.month - 1,//关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                }
        }
    });
});
ログイン後にコピー

ライユイ時間選択ボックスの紹介

elem: '#endDate' バインディング要素;

type: 'datetime' 選択タイプ:

ライユイ時間選択ボックスの紹介

#max: "2099-12 -31 23 :59:59" デフォルトの最大値を設定します。

min: "1970-1-1 00:00:00" デフォルトの最小値を設定します。

done: function (value, dates) {
                endDate.config.min = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                };
            }
ログイン後にコピー
これは開始時刻を選択するためのものです。終了時刻は開始時刻以上である必要があります。

この記事は、https://blog.csdn.net/Third_Week/article/details/96831135

から転載されています。もっとlayuiの知識がある場合は、

layuiの使い方チュートリアル列にご注意ください。

以上がライユイ時間選択ボックスの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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