jquery easyui 时间控件的使用

一、日期控件datebox

原文链接:

http://blog.csdn.net/walkerjong/article/details/7530709

http://www.cnblogs.com/yechun/archive/2012/03/18/2404381.html

基本用法:

1) 加入日期选择框

$("#dd").datebox({"required":true}); 

2) javascript获取日期选择框的值

$("#dd").datebox("getValue");  或者$("input[name='dd']").val();

那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input id="dd" type="text"赋值,然后我们就可以使用

$("#dd").val()获取选中的日期值了。

    <script type="text/javascript">
    $(document).ready(function(){
        $("#dd").datebox({
            required:true,
            onSelect: function(date){
                $("#dd").val(date);
            }
        });
    });
    </script>  

3) javascript设置datebox的值

$("#dd").datebox("setValue", "2012-01-01");

 例:添加编辑页面

    @Html.Hidden("hBirthDate", Model.BirthDate.ToString("yyyy-MM-dd"))

 $(document).ready(function () {

        $("#BirthDate").datebox({
            required: false,
            formatter: function (date) { return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) {
                $("#BirthDate").val(date);
            }
        });
        //处理日期格式问题
        if ($("#hBirthDate").val() != "" && $("#hBirthDate").val() != "0001-01-01") {
            $("#BirthDate").datebox("setValue", $("#hBirthDate").val());
        } else {
            $("#BirthDate").datebox("setValue", ((new Date()).getFullYear() - 25) + "-01-01");
        }
});

二、时间控件datetimebox

 用法和日期控件类似

实现开始日期和结束日期的判断和赋值

绑定脚本:

 <script type="text/javascript">
    $(document).ready(function(){
         $("#StartDT").datetimebox({
            required: false,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
            },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) {
                $("#StartDT").val(date);
                var startDate = date;
                var endDate = $('#EndDT').val();
                if ((new Date(startDate)).dateDiff(endDate) > 0) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    var hh = date.getHours();
                    var mm = date.getMinutes();
                    var ss = date.getSeconds();
                    var dateStr =  y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
                    $("#EndDT").datetimebox('setValue', dateStr);
                }
            }
        });
        $("#EndDT").datetimebox({
            required: false,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
            },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) {
                $("#EndDT").val(date);
                var startDate = $("#StartDT").val();
                var endDate = date;
                if ((new Date(startDate)).dateDiff(endDate) > 0) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    var hh = date.getHours();
                    var mm = date.getMinutes();
                    var ss = date.getSeconds();
                    var dateStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
                    $("#StartDT").datetimebox('setValue', dateStr);
                }
            }
        });
        //时间赋值        if ($("#ModelStartDT").val() != "") {
            $("#StartDT").datetimebox("setValue", $("#ModelStartDT").val());
        }
        if ($("#ModelEndDT").val() != "") {
            $("#EndDT").datetimebox("setValue", $("#ModelEndDT").val());
        }

    });
    </script>  

使用的自定义方法dateDiff

可参考http://www.cnblogs.com/xcsn/p/5194822.html

相关的时间验证

jQuery.validator.addMethod("nowtime", function (value, element) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = new Date();
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正则替换
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime < deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "不能小于当前时间!");

$.validator.addMethod("mintime", function (value, element, para) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = para;
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正则替换
    deadlinetime = deadlinetime.replace(reg, '/');
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime < deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "结束时间必须大于开始时间");
$.validator.addMethod("maxtime", function (value, element, para) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = para;
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正则替换
    deadlinetime = deadlinetime.replace(reg, '/');
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime > deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "开始时间必须小于结束时间");

 

 

 

 

 

 

 

 

 

时间: 2024-08-03 06:46:12

jquery easyui 时间控件的使用的相关文章

jquery mobile时间控件赋值问题

问题描述 jquery mobile时间控件赋值问题 这样的时间控件怎么赋值呀? 解决方案 具体看你用的这个插件的api,jquery官网没有这个插件..

时间控制范围-easyUI 时间控件 时间范围控制

问题描述 easyUI 时间控件 时间范围控制 如图 我想实现引进时间在当前时间之前 启用时间在引进时间之后 在当前时间之前 预计使用时间在引进时间和启用时间之间 求高手指教 解决方案 输入完成触发onchange,在里面判断下 解决方案二: easyui datebox日期对比参考

JQuery EasyUI 日期控件如何控制日期选择区间_jquery

复制代码 代码如下: <tr><th>发售起始日期</th> <td><input type="text" id="usLineTime" name="usLineTime" size="20" class='easyui-validatebox Wdate' onFocus="WdatePicker({el:'usLineTime',dateFmt:'yyyy-

jquery UI Datepicker时间控件的使用方法(加强版)_jquery

先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

jquery获取easyui日期控件的值实现方法_jquery

jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery获取easyui日期控件的值 jquery easyui 日期框 有这样的一个日期文本框: <input type="text" name="mdate" size="20" value="" id="mdate" class="easyui-datebox"/>  使用easyui给文本

jquery UI Datepicker时间控件的使用方法(终结版)_jquery

近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家: 先给大家看两张效果图 在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天. 具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看: 第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件: <script type="text

jquery UI Datepicker时间控件的使用方法(基础版)_jquery

本文为大家分享jquery ui datepicker时间控件的使用方法,通过实例讲解了解ui datepicker时间控件,先给大家看一看效果图: 效果: 常用场合: 1.输入框 2.div使用方法:1.限制日期 $("#resultDiv").datepicker({ onSelect: function (dateText, inst) { //代码:选择日期后触发的事件 }, minDate: new Date(),//最小日期 maxDate: new Date($(&quo

easyui-jquery 时间控件怎么能禁止输入只能选择日期?

问题描述 jquery 时间控件怎么能禁止输入只能选择日期? validType=""pmsCharChn[{maxLength:40}]""/> jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 如图:输入框可以输入字的,如何禁止手动输入,求大神指点. 解决方案 用这个editable=""false"" 就可以了 亲测可用 datebox是继承com

jquery 时间控件-关于jquery时间控件位置放在第一个的问题?

问题描述 关于jquery时间控件位置放在第一个的问题? 日期的输入框放在的div里面的第一个,当页面用dialog弹出这个div时,输入框自动获取到焦点,然后就控件就自己跳出来了.如何处理让弹出这个div时,时间控件没有自己弹出来? 解决方案 时间控件的问题 解决方案二: .bind('focus', function(e) {e.preventDefault();}); 试试这个看看 屏蔽默认的获取焦点事件. 解决方案三: 浏览器不会自动给控件设置焦点的,你肯定是用js设置了焦点,将代码去掉