jquery easyui 时间控件的使用-阿里云开发者社区

jquery easyui 时间控件的使用

2013-04-09 1165

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一、日期控件datebox 原文链接： http://blog.csdn.net/walkerjong/article/details/7530709 http://www.cnblogs.com/yechun/archive/2012/03/18/2404381.

一、日期控件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;
    }
}, "开始时间必须小于结束时间");

jquery easyui 时间控件的使用

一、日期控件datebox

二、时间控件datetimebox

热门文章

最新文章

相关课程

相关电子书

相关实验场景