在html中引入pikaday的时间控件

阳光穿透心脏的1/2处 2022-11-30 15:57 171阅读 0赞

版权声明:转载请标明博客地址,谢谢！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ3NjUyMA_size_16_color_FFFFFF_t_70_pic_center]

--css
    <link rel="stylesheet" th:href="@{${#httpServletRequest.getContextPath()} + '/common/css/pikaday.css'(v=${resourceVersion})}">
    
     <div class="filter-item">
                    <div class="filter-label">提交时间：</div>
                    <div class="filter-fields">
                        <div class="date-fields J-date-range">
                            <div class="input-date item-input">
                                <input type="text" name="beginTimeStr" class="form-control" placeholder="请选择日期" th:value="${param.beginTimeStr}" readonly>
                            </div>
                            <div class="search-item-gap">-</div>
                            <div class="input-date item-input">
                                <input type="text" name="endTimeStr" class="form-control" placeholder="请选择日期" th:value="${param.endTimeStr}" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                
     --js
       <script th:src="@{${#httpServletRequest.getContextPath()} + '/common/js/pikaday.js'(v=${resourceVersion})}"></script>
       <script th:src="@{${#httpServletRequest.getContextPath()} + '/js/time.js?t=1'(v=${resourceVersion})}"></script>

--time.js
    
    $(function(){ 
    
        //日期空间初始化
        $('.J-date-range').each(function () { 
            var $input1 = $(this).find('input').eq(0);
            var pikadayStart = new Pikaday({ 
                format: 'yyyy-mm-dd',//日期格式
                field: $(this).find('input').eq(0)[0],//绑定pikaday到表单区域字段
                firstDay: 1,//本周第一天
                yearRange: [1900, 2050],//任何一方的年数（如10）或上/下范围数组
                onSelect: function (val) {  //function(e){} 组件被选择时
                    pikadayEnd.setMinDate(val);//可以选择的最小/最早日期（这是一个本地日期对象）
                }
            });
            var pikadayEnd = new Pikaday({ 
                format: 'yyyy-mm-dd',//日期格式
                field: $(this).find('input').eq(1)[0],//绑定pikaday到表单区域字段
                firstDay: 1,//本周第一天
                yearRange: [1900, 2050],//任何一方的年数（如10）或上/下范围数组
                onSelect: function (val) { //function(e){} 组件被选择时
                    pikadayStart.setMaxDate(val);//同理，可以选择的最大/最晚日期（这是一个本地日期对象）
                }
            });
    
            var val1 = $(this).find('input').eq(0).val();
            var val2 = $(this).find('input').eq(1).val();
            if (val1) { 
                var times = GLOBAL.strTimeToNum($.trim(val1))
                pikadayEnd.setMinDate(new Date(times));
            }
    
            if (val2) { 
                var times = GLOBAL.strTimeToNum($.trim(val2))
                pikadayStart.setMaxDate(new Date(times));
            }
        })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ3NjUyMA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a9d586f72c6143a0a6de7c54148f4932.png