Easyui datebox 限制时间选择范围



Require Date:
                    <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style="width: 110px" id="StartTime">
To        :
                    <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style="width: 110px" id="EndTime">
$(function () {
//控件的初始限制
        $(‘#EndTime‘).datebox().datebox(‘calendar‘).calendar({
            validator: function (endDate) {
                return endDate <= new Date();
            }
        });
        $(‘#StartTime‘).datebox().datebox(‘calendar‘).calendar({
            validator: function (startDate) {
                return startDate <= new Date();
            }
        });
})

 
//easyui官方重写时间格式的方法
function myformatter(date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    return y + ‘-‘ + (m < 10 ? (‘0‘ + m) : m) + ‘-‘ + (d < 10 ? (‘0‘ + d) : d);
}
function myparser(s) {
    if (!s) return new Date();
    var ss = (s.split(‘-‘));
    var y = parseInt(ss[0], 10);
    var m = parseInt(ss[1], 10);
    var d = parseInt(ss[2], 10);
    if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
        return new Date(y, m - 1, d);
    } else {
        return new Date();
    }
}

//当选择开始日期时限定结束日期的范围
function selectStartDate(startDate) {
    //返回calendar会清空EndTime内容,需要保存下
    var tempEndDate = $(‘#EndTime‘).datebox(‘getValue‘)
    $(‘#EndTime‘).datebox().datebox(‘calendar‘).calendar({
        validator: function (endDate) {
            //限定日期选择范围
            return endDate >= startDate && endDate <= new Date();
        }
    });
    //将EndTime写回去
    $(‘#EndTime‘).datebox(‘setValue‘, tempEndDate);
}
//当选择结束日期时限定开始日期的范围
function selectEndDate(endDate) {
    var tempStartDate = $(‘#StartTime‘).datebox(‘getValue‘);
    $(‘#StartTime‘).datebox().datebox(‘calendar‘).calendar({
        validator: function (startDate) {
            return startDate <= endDate && startDate <= new Date();
        }
    });
    $(‘#StartTime‘).datebox(‘setValue‘, tempStartDate);
}
时间: 2024-10-14 04:47:52

Easyui datebox 限制时间选择范围的相关文章

给easyui datebox时间框控件扩展一个清空的实例

给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: function (target) { return $(target).datebox("o

easyui datebox 扩展 只显示年月

一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式的,要么就是截取字符串,不可取,自己没有写过类似的扩展,但是也算是实现功能了,先来张图吧 本人水平有限写不出高深的东西,代码大家都能看懂,但是还是贡献出来,让大家提提意见共同进步吧 $.extend($.fn.combobox.methods, { yearandmonth: function (jq) { return jq.each(function () { var obj = $(this).combo

Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1

Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子,基本一样.只是1.5.4.1增加了一些代码,所以行号有些差异,并且编码后的数字有些变化.Easyui datebox单击文本框显示日期选择 eayui版本1.5.3 修改jQuery.easyui.min.js文件,在文件中查找:tb._size(opts, 保存,成功. 原文地址:https:/

Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个

(function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, showType:'show' }); }; /** * 获取时间区间 * @param type 1:当年的一月一日到现在:type 2:获取当月的第一天和最后一天 * return {startTime:xxxx,endTime:xxxx} */ $.getTimeInterval = functi

Easyui datebox单击文本框显示日期选择

Easyui默认是点击文本框后面的图标显示日期,为了更进一步优化体验 修改为单击文本框显示日期选择框 修改jquery.easyui.min.js(作者用的是1.3.6版本,其他版本或有区别) 可 ctrl+f 搜索 "_outerWidth():0" 在本行下面添加如下代码: // datebox单击文本框出现日期选择 start if ($(_83f).hasClass("datebox-f")) { _844.click(function() { _845.c

easyui datebox显示月份

$(function () { setDateToMonth('globalStartDate'); setDateToMonth('globalStopDate'); }); function setDateToMonth(id) { var db1=document.getElementById(id); var db = $(db1); db.datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 spa

[easyui] datebox源码阅读. 批注

jquery.datebox.js 文件. (function($){ /** * create date box */ function createBox(target){ var state = $.data(target, 'datebox'); var opts = state.options; //在'onShowPanel'触发时会执行一系列的函数. $(target).addClass('datebox-f').combo($.extend({}, opts, { onShowP

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q

EasyUI DateBox 按钮自定义添加功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DateBox Buttons - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css