日历控件源码

最新推荐文章于 2023-04-24 16:29:16 发布

汤姆的猫

最新推荐文章于 2023-04-24 16:29:16 发布

阅读量1k

点赞数

分类专栏： java 文章标签：日历控件 javascript 源码

本文链接：https://blog.csdn.net/sunshoupo211/article/details/42455957

版权

前两天需要个简单的日历控件，网上搜了一下居然还有人卖，估计是提供其他维护服务吧，反正我是用不到的，自己手写了个凑合用，自己写的兼容性没测过，如果有什么问题大家给点改进意见。

先上图

源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript">

        //星期列表
        var WEEK = ["日","一","二","三","四","五","六"];
        //平年每月天数
        var DAYS_IN_NORMAL = [31,28,31,30,31,30,31,31,30,31,30,31];
        //闰年每月天数
        var DAYS_IN_SPECIAL = [31,29,31,30,31,30,31,31,30,31,30,31];
        //选择年份每月天数
        var DAYS_IN_SELECTED;
        //存放日期的输入框
        var CONTAINER;
        //日期分隔符
        var SPLIT;
        //日历界面
        var DATE_PANEL;
        //选定的日期，默认为当天
        var DEFAULT_DATE = new Date();

        /**
         * 日期控件入口，主要控制div层显示和隐藏
         * @param inputId 日期输入框ID
         * @param split   日期分隔符
         */
        function selectDate(inputId,split)
        {
            SPLIT = split;
            CONTAINER = document.getElementById(inputId);
            DATE_PANEL = document.getElementById("div_"+inputId);

            //获取日期输入框位置(x,y)
            var x = CONTAINER.clientLeft;
            var y = CONTAINER.clientTop + CONTAINER.clientHeight;
            var strDate = CONTAINER.value.trim();

            //设定日历的日期
            if(strDate != "")
            {
                var ymd = changeStr2ArrDate(strDate);

                if(ymd.length==3)
                {
                    DEFAULT_DATE.setFullYear(parseInt(ymd[0]));
                    DEFAULT_DATE.setMonth(parseInt(ymd[1])-1);
                    DEFAULT_DATE.setDate(parseInt(ymd[2]));
                }
                else
                {
                    alert("输入日期格式不正确");
                    return "";
                }
            }

            if(DATE_PANEL.style.display=="none")
            {
                DATE_PANEL.style.border = "1px solid black";
                DATE_PANEL.style.backgroundColor = "aliceblue";
                DATE_PANEL.style.width = "175px";
                DATE_PANEL.style.height = "160px";
                DATE_PANEL.style.position = "fixed";
                DATE_PANEL.style.zIndex = "99";
                DATE_PANEL.style.marginLeft = x;
                DATE_PANEL.style.marginTop = y;
                DATE_PANEL.innerHTML

最低0.47元/天解锁文章

汤姆的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
日历控件源码

前两天需要个简单的日历控件，网上搜了一下居然还有人卖，估计是提供其他维护服务吧，反正我是用不到的，自己手写了个凑合用，自己写的兼容性没测过，如果有什么问题大家给点改进意见。先上图源码 //星期列表 var WEEK = ["日","一","二","三","四","五","六"]; //平年每月
复制链接

扫一扫