开发者社区> 芝麻软件> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery easyui 时间控件的使用

简介: 一、日期控件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简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
0 0
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
1535 0
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
1416 0
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
1241 0
+关注
芝麻软件
编程语言,框架相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载