自己用JS写了一个简单的时间控件。。。

 
//绘画时间选择器
var timeSelect={
    obj:'',
    MainAttr:{
        width:"200px",
        height:"170px",
        border:"1px solid rgb(130, 135, 144)",
        background:"rgb(255, 255, 255) none repeat scroll 0% 0%",
        position:"fixed"
    },
    TopAttr:{
        height:21,
        borderBottom:"1px solid rgb(208, 208, 208)",
        position:"relative"
    },
    Top_leftRight:{
        position: "absolute",
        top: "0px",
        cursor: "pointer",
        display: "block",
        height: "21px",
        lineHeight: "21px"
    },
    Center_r:{
        float: "left",
        fontSize: "12px",
        width: "28px",
        lineHeight: "25px",
        height: "25px",
        textAlign: "center",
        color: "rgb(0, 0, 0)",
        cursor: "pointer",
        background: "rgb(255, 255, 255) none repeat scroll 0% 0%"
    },
    bottom:{
      position:"absolute",
      right:0,
      bottom:0,
    },
    button:{
        background:"#ffffff",
        border:"#ccc 1px solid",
    }
}
//绘画时间选择器开始
timeSelect.Window=function(obj){
    if($('.T_time').length>0){
        $('.T_time').remove();
    }
    timeSelect.obj=$(obj);
    var time=new Date();
    var time_n=time.getUTCFullYear();//年
    var time_m=time.getMonth()+1;//月
    var time_r=new Date(time_n,time_m,0).getDate();
    var str="<div class='T_time'><div class='T_time_top'></div><div class='T_time_center'></div><div class='T_time_bottom' ></div></div>";
    var offset=timeSelect.obj.offset();
    $('body').append(str);
    //内容填充函数 主要实现 月份和日子填充
    timeSelect.div(time_n,time_m,time_r);

    $('.T_time').css(timeSelect.MainAttr);
    $('.T_time').css("left",offset.left);
    $('.T_time').css("top",offset.top+timeSelect.obj.height()+10);
    $('.T_time_top').css(timeSelect.TopAttr);
    $('.T_time_bottom').append("<button οnclick=\"timeSelect.close()\">关闭</button>");
    $('.T_time_bottom').css(timeSelect.bottom);
    $('.T_time_bottom button').css(timeSelect.button);
}
timeSelect.div=function(time_n,time_m,time_r){
    $('.T_time_top').append('<div style=" left: 10px; " tag="top" οnclick="timeSelect.top('+time_n+','+(time_m-1)+')">&lt;</div>');
    $('.T_time_top').append('<div style="right: 10px;" tag="top" οnclick="timeSelect.top('+time_n+','+(time_m+1)+')">&gt;</div>');
    $('.T_time_top').append('<div style="text-align: center; font-size: 12px; height: 21px; line-height: 21px;">'+time_n+"-"+time_m+'</div>');
    $("div[tag='top']").css(timeSelect.Top_leftRight);

    var time_center="";
    for(var i=1;i<=time_r;i++){
        time_center+="<div data_time=\""+time_n+"-"+time_m+"-"+i+"\" οnclick='timeSelect.content(this)'>"+i+"</div>";
    }
    $('.T_time_center').append(time_center);
    $('.T_time_center div').css(timeSelect.Center_r);
    $('.T_time_center div').mouseover(function(){
        $('.T_time_center div').css("background","rgb(255, 255, 255) none repeat scroll 0% 0%");
        $(this).css("background","#ccc none repeat scroll 0% 0%");
    });
    $('.T_time_center').append("<div style='clear:both'></div>");
}
//上下一个月
timeSelect.top=function(time_n,time_m){
    $('.T_time_top').html('');
    $('.T_time_center').html('');
    if(time_m>=13){
        time_n+=1;
        time_m=1;
    }else if(time_m<=0){
        time_n-=1;
        time_m=12;
    }
    var time_r=new Date(time_n,time_m,0).getDate();
    timeSelect.div(time_n,time_m,time_r);
}
//选择日期后内容填充到输入框
timeSelect.content=function(T_this){
    var time=$(T_this).attr('data_time');
   timeSelect.obj.attr('value',time);
    timeSelect.close();
}
timeSelect.close=function(){
    $('.T_time').remove();
}
//**
//在input框 绑定一个onclick事件然后 οnclick="timeSelect. Window(this)";
 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值