zoukankan      html  css  js  c++  java
  • Jquery + css 日期控件用法实例.zip

    /*==============================================================================
    *
    * Filename:common.js
    * Description:  公共JS方法封装,主要包含,页面的鼠标移动行的颜色跟着改变,以及
    增加、修改、删除弹出隐藏Div进行操作,增加。修改赋值问题。本实例只包含日期控件用法
    具体用法很简单,在文本框中增加  attr="ymd"  2013-09-10格式 可以选择自己需要的日期格式
    用法:
    1.引用 css.css文件样式
    2.引用jquery-1.7.2.min.js jquery框架
    3.引用common.js 公共类
    * Version: 1.0
    * Created: 2011.05.27
    * Author : liangjw
    * E-mail : liangjw0504@163.com
    * Q   Q  : 592568532
    * Profile Url:http://90ideas.net/
    * Company: Copyright (C) Create Family Wealth Power By Peter
    *
    ==============================================================================*/
     * 备注信息: 上传部分自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起
     * 主要研究erp,cms,crm,b2b,oa等系统和网站的开发,欢迎有共同追求和学的IT人员一起学习和交流。
     * 学习和讨论有关asp.net  mvc ,Ajax ,jquery ,html/css, xml,sqlserver ,wpf,IIS以及服务器的搭建和安全性相关技术的交流和学习。

    1. [图片] ymdh.png    

    2. [图片] ymdhm.jpg    

    3. [图片] ymdhms.jpg    


    ​​4. [代码][C#]代码   
    /******************************************************************************

    * Filename:  common.js
    * Description:  公共JS方法封装,主要包含,页面的鼠标移动行的颜色跟着改变,以及
    增加、修改、删除弹出隐藏Div进行操作,增加。修改赋值问题。本实例只包含日期控件用法
    具体用法很简单,在文本框中增加  attr="ymd"  2013-09-10格式 可以选择自己需要的日期格式
    用法:
    1.引用 css.css文件样式
    2.引用jquery-1.7.2.min.js jquery框架
    3.引用common.js 公共类
    * Author :  liangjw
    * Created Mark:  2013-08-15
    * E-mail: liangjw0504@163.com
    * QQ:592568532
    * Version:    V1.0.0.0
    * Company: : Copyright (C) 2013 Create Family Wealth Power By Peter All Rights Reserved
    * Remark: 封装自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起
    * 主要研究erp,cms,crm,b2b,oa等系统和网站的开发,欢迎有共同追求和学的IT人员一起学习和交流。
    * 学习和讨论有关asp.net  mvc ,Ajax ,jquery ,html/css, xml,sqlserver ,wpf,IIS以及服务器的搭建和安全性相关技术的交流和学习。
    * Update Author:   无
    * Update Description: 无
    * Update Mark : 无

    *******************************************************************************/
     
    ///////////////////////////////日期控件操作法方法封装//////////////////////////////////
    $(function () {
        $("input[attr^=ym]").each(function () {
            $(this).attr("readonly", "readonly");
            $(this).on("click", function () {
                MVC_CalendarInit(this.value, this.id);
            });
        });
    });
    ///////////////////////////////////////////////////////////////////
    //日期控件弹出位置定位
    ///////////////////////////////////////////////////////////////////
    $.fn.extend({
        setPosition: function (obj) {
            var iX, iY;
            var pi = getAbsPoint(obj);
            //计算left
            if (pi.absLeft + this.outerWidth() > $(window).width() + $(document).scrollLeft()) {
                iX = pi.absRight - this.outerWidth();
            }
            else {
                iX = pi.absLeft;
            }
            //计算top
            if (pi.absBottom + this.outerHeight() > $(window).height() + $(document).scrollTop()) {
                iY = pi.absTop - this.outerHeight();
            }http://www.huiyi8.com/gongzuozongjie/​
            else {工作总结
                iY = pi.absBottom;
            }
            //逻辑处理left,top属性
            if (iX < 0) {
                iX = 0;
            }
            if (iY < 0) {
                iY = 0;
            }
            //设置属性
            this.css({ left: iX + "px", top: iY + "px" });
     
            return this;
        }
    });
     
    ///////////////////////////////////////////////////////////////////
    //获取控件的在页面中的绝对位置
    function getAbsPoint(obj) {
        var x = $(obj).offset().left;
        var y = $(obj).offset().top;
        var xw = $(obj).outerWidth();
        var yh = $(obj).outerHeight();
     
        return { absTop: y, absLeft: x, absRight: x + xw, absBottom: y + yh };
    }
     
    var MVC_CalendarElementId = null;
    function MVC_CalendarInit(time, id) {
        if (time == "") time = null;
        if (time != null) time = time.replace(new RegExp(/-/ig), "/");
        $("#MVC_Calendar").remove();
        MVC_CalendarElementId = id;
        var Calendar = $(CreateDateTable(time));
        Calendar.find("*").attr("Author", "MVC_Calendar");
        $(document.body).append(Calendar);
        Calendar.setPosition($("#" + MVC_CalendarElementId));  //设置弹出位置定位
    }
     
    ///////////////////////////////////////////////////////////////////
    //创建设置数值
    ///////////////////////////////////////////////////////////////////
    function MVC_CalendarSetValue(v) {
        if (v == "")
            $("#" + MVC_CalendarElementId).val("");
        else if (v != null)
            $("#" + MVC_CalendarElementId).val(new Date(v).format(MVC_CalendarFormatStr($("#" + MVC_CalendarElementId).attr("attr"))));
        $("#MVC_Calendar").remove();
    }
     
    ///////////////////////////////////////////////////////////////////
    //对日期的处理模式
    function MVC_CalendarChangeValue(id) {
        var v = $("#" + id).val();
        var t = new Date($("#" + MVC_CalendarElementId).val().replace(new RegExp(/-/ig), "/"));
        if (t == "NaN" || t == "Invalid Date") {
            t = new Date();
        }
        switch (id) {
            case "MVC_CalendarYear":
                t.setYear(v);
                break;
            case "MVC_CalendarMonth":
                t.setMonth(v - 1);
                break;
            case "MVC_CalendarHours":
                t.setHours(v);
                break;
            case "MVC_CalendarMinutes":
                t.setMinutes(v);
                break;
            case "MVC_CalendarSeconds":
                t.setSeconds(v);
                break;
        }
        $("#" + MVC_CalendarElementId).val(new Date(t).format(MVC_CalendarFormatStr($("#" + MVC_CalendarElementId).attr("attr"))));
    }
     
    ///////////////////////////////////////////////////////////////////
    //事件格式处理js方法,常用的日期时间格式,包含以下格式
    //ym ;2013-09
    ///////////////////////////////////////////////////////////////////
    function MVC_CalendarFormatStr(t) {
     
        //获取参数,转换为小写进行处理判断,返回指定日期时间格式
        switch (t.toLowerCase()) {
            case "ym":
                return "yyyy-MM";
                break;
            case "ymd":
                return "yyyy-MM-dd";
                break;
            case "ymdh":
                return "yyyy-MM-dd hh";
                break;
            case "ymdhm":
                return "yyyy-MM-dd hh:mm";
                break;
            case "ymdhms":
                return "yyyy-MM-dd hh:mm:ss";
                break;
            default:
                return "yyyy-MM-dd";
                break;
        }
    }
     
    function NullReplace(v, r) {
        var v = undefined ? r : v;
        return v;
    }

  • 相关阅读:
    SharePoint 2010 新体验3 文档集
    Firebird 修改表名
    C++Builder XE7 up1 简单测试
    Firbird 将可 null 的列更新为 not null
    用delphiXE7 dbExpress Framework提供的功能获取数据表信息
    Linux的基本命令总结
    IOS 隐藏时间条
    最大流 ZQUOJ 10181 && POJ 1273
    最大二分匹配 匈牙利算法模板&&POJ 1469 COURSES
    新加坡第四天下午
  • 原文地址:https://www.cnblogs.com/xkzy/p/3977643.html
Copyright © 2011-2022 走看看