【Layui】15 日期時間選擇器 Laydate

阿新 • • 發佈：2020-08-02

文件地址：

https://www.layui.com/demo/laydate.html

【基本案例】

基本日期與國際日期

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常規用法</legend>
</fieldset>

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline" 
>
            <label class="layui-form-label">中文版</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline" 
>
            <label class="layui-form-label">國際版</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
</div>

< 
script type="text/javascript">
    layui.use('laydate', function(){
        let laydate = layui.laydate;

        //常規用法
        laydate.render({
            elem: '#test1'
        });

        //國際版
        laydate.render({
            elem: '#test1-1'
            ,lang: 'en'
        });
    });
</script>

年選擇器：

設定屬性為年即可

type: 'year'

年月選擇器：

設定屬性為月即可，上一級的年也將保留攜帶

type: 'month'

時間選擇器：

僅能選擇時分秒：

type: 'time'

範圍設定：

開啟範圍設定，預設代表兩個月之內的天數範圍取值：

range: true

年範圍取值設定：

    ,type: 'year'
    ,range: true

年月範圍取值設定：

    ,type: 'month'
    ,range: true

時間範圍取值設定：

    ,type: 'time'
    ,range: true

日期時間範圍取值設定：

    ,type: 'datetime'
    ,range: true

【直接巢狀展示】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>直接巢狀顯示</legend>
</fieldset>

<div class="site-demo-laydate">
    <div class="layui-inline" id="test-n1"></div>
    <div class="layui-inline" id="test-n2"></div>
    <div class="layui-inline" id="test-n3"></div>
    <div class="layui-inline" id="test-n4"></div>
</div>

<script type="text/javascript">
    layui.use('laydate', function(){
        let laydate = layui.laydate;

        //直接巢狀顯示
        laydate.render({
            elem: '#test-n1'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            ,position: 'static'
            ,lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            ,type: 'month'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            ,type: 'time'
            ,position: 'static'
        });
    });
</script>

【主題色風格自定義】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>其它主題</legend>
</fieldset>

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">墨綠主題</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test29" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自定義</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test30" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">格子主題</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test31" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use('laydate', function(){
        let laydate = layui.laydate;

        //墨綠主題
        laydate.render({
            elem: '#test29'
            ,theme: 'molv'
        });

        //自定義顏色
        laydate.render({
            elem: '#test30'
            ,theme: '#393D49'
        });

        //格子主題
        laydate.render({
            elem: '#test31'
            ,theme: 'grid'
        });
    });
</script>

【其他附屬功能】

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">初始賦值</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test19" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">選中後的回撥</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test20" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">日期切換的回撥</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test21" placeholder="yyyy-MM-dd">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">不出現底部欄</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test22" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">只出現確定按鈕</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test23" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自定義事件</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test24" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" id="test25-1">點我觸發</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" id="test26-1">雙擊我觸發</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test26" placeholder="yyyy-MM-dd">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">日期只讀</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test27" readonly="" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">非input元素</label>
            <div class="layui-input-inline">
                <div id="test28" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use('laydate', function(){
        let laydate = layui.laydate;

        //初始賦值
        laydate.render({
            elem: '#test19'
            ,value: '1989-10-14'
            ,isInitValue: true
        });

        //選中後的回撥
        laydate.render({
            elem: '#test20'
            ,done: function(value, date){
                layer.alert('你選擇的日期是：' + value + '<br>獲得的物件是' + JSON.stringify(date));
            }
        });

        //日期切換的回撥
        laydate.render({
            elem: '#test21'
            ,change: function(value, date){
                layer.msg('你選擇的日期是：' + value + '<br><br>獲得的物件是' + JSON.stringify(date));
            }
        });
        //不出現底部欄
        laydate.render({
            elem: '#test22'
            ,showBottom: false
        });

        //只出現確定按鈕
        laydate.render({
            elem: '#test23'
            ,btns: ['confirm']
        });

        //自定義事件
        laydate.render({
            elem: '#test24'
            ,trigger: 'mousedown'
        });

        //點我觸發
        laydate.render({
            elem: '#test25'
            ,eventElem: '#test25-1'
            ,trigger: 'click'
        });

        //雙擊我觸發
        lay('#test26-1').on('dblclick', function(){
            laydate.render({
                elem: '#test26'
                ,show: true
                ,closeStop: '#test26-1'
            });
        });

        //日期只讀
        laydate.render({
            elem: '#test27'
            ,trigger: 'click'
        });

        //非input元素
        laydate.render({
            elem: '#test28'
        });
    });
</script>

【公曆節日，自定義重要日期】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>公曆節日和自定義重要日子</legend>
</fieldset>

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">開啟公曆節日</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test17" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">自定義重要日</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test18" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use('laydate', function(){
        let laydate = layui.laydate;

        //開啟公曆節日
        laydate.render({
            elem: '#test17'
            ,calendar: true
        });

        //自定義重要日
        laydate.render({
            elem: '#test18'
            ,mark: {
                '0-10-14': '生日'
                ,'0-12-31': '跨年' //每年的日期
                ,'0-0-10': '工資' //每月某天
                ,'0-0-15': '月中'
                ,'2017-8-15': '' //如果為空字元，則預設顯示數字+徽章
                ,'2099-10-14': '呵呵'
            }
            ,done: function(value, date){
                if(date.year === 2017 && date.month === 8 && date.date === 15){ //點選2017年8月15日，彈出提示語
                    layer.msg('這一天是：中國人民抗日戰爭勝利72週年');
                }
            }
        });
    });
</script>

【Layui】15 日期時間選擇器 Laydate

文件地址： https://www.layui.com/demo/laydate.html 【基本案例】基本日期與國際日期 <fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 30px;\">

微信小程式如何實現精確的日期時間選擇器

這篇文章主要介紹了微信小程式如何實現精確的日期時間選擇器,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Django 如何使用日期時間選擇器規範使用者的時間輸入示例程式碼詳解

如果你的模型中含有 datetime 型別的欄位，表單中需要使用者輸入日期和時間，那麼你如何保證不同使用者輸入的時間都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是個必須要考慮的問題。一個更好的方式是在前端使用

Element DateTimePicker日期時間選擇器的使用示例

元件—日期時間選擇器日期和時間點 <template> <div class=\"block\"> <span class=\"demonstration\">預設</span>

Element UI——日期時間選擇器el-date-picker開始時間與結束時間約束解決方案

實現的效果 <el-date-picker :disabled=\"!isEdit\" v-model=\"scope.row.BeginDate\" type=\"date\" format=\"yyyy-MM-dd\" placeholder=\"選擇日期\" size=\"mini\" style=\"width:150px;\"