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;
    }
}, "开始时间必须小于结束时间");

 

 

 

 

 

 

 

 

 

相关文章
|
10天前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
7月前
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
36 0
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
82 0
|
JavaScript NoSQL 前端开发
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
139 0
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(2)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
126 0
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(1)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
124 0
|
JSON JavaScript 前端开发
EasyUI-DataGrid控件[表格+日历]应用
EasyUI-DataGrid控件[表格+日历]应用
EasyUI-DataGrid控件[表格+日历]应用
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
139 0
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
39 0
|
8月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
30 0