A simple horizontal javascript date control_time and date-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A simple horizontal javascript date control_time and date

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:07 PM

The specific requirements are:
1. The date table fills up the page horizontally.
2. The date list of each month is displayed in a row horizontally, instead of displaying a box like many date controls on the Internet.
3. It is required that only year, month and day are optional. After selecting year or month, the corresponding date will be automatically updated (this is available in every date control).
4. The current year and month are displayed by default, the current date is highlighted, and the current week (week of the year) and day of the week are displayed.
5. After selecting a date, the current date will be highlighted, and the week and week display will be automatically updated.
6. Provide an interface to set the display style of a specific date.
6. Others are some interface display issues.

I thought it was just a date control. It’s relatively simple to make, but it’s especially horizontal. This is the first time I’ve heard of this need!
This is my first time writing something like a calendar. However, the trouble this time still lies in the calculation of weeks and the implementation of the interface for setting specific dates provided in the end. But after some analysis, it was solved very well. .
Main summary:
1. Use closures to hide internal functions and variables to prevent variable pollution. Finally, only one external interface is provided: setDateStyle
2. Calculating the number of days in February each year is not by judging leap years, but by judging whether February 29 exists. If it does not exist, it is 28 days.
3. To calculate the week, you must first calculate the day of the year that the current date is, and also consider the day of the week that January 1 of this year is, and then calculate it.
4. setDateStyle supports the input of a single date style and also supports the setting of multiple date styles. For style updates, arrays are mainly used to merge characters, and the indexOf method of strings is used to match and execute style settings.
5. CSS/JS/HTML are separated for easy maintenance. Function modularization facilitates reuse.

Copy code The code is as follows:

var logDateControl=(function(){ 
 var curSelEl; //The currently selected date
 var styleData=[],dataStyle={}; 
 //Get the element with the specified id 
 var $=function(id){return document.getElementById(id)} 
 //Calculate the week of the specified date (default is the current date). This calculation method is more rigorous and accurate 
 var calWeek= function(dt){ 
 var calDay=dt||new Date(); //The current time to be calculated
 var firstDay=new Date(calDay.getFullYear(),0,1); //This year First day 
 //Calculate what day of the year it is now, 00:00 is the beginning of the day 
 var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24) 1; 
 //What day of the week is the first day of the year
 var firstDayWeekday=firstDay.getDay(); 
 //The result is added to Monday of the first week to facilitate subsequent calculations
 var diffDay=firstDayWeekday= =0?6:firstDayWeekday-1; 
 daysAll=daysAll diffDay; 
 return Math.ceil(daysAll/7); //Return the calculation result
 } 
 //Calculate the number of days in a month, The year is 4 digits, the month is 1-2 digits (it should be in js date format such as 0 in January), the data is illegal and returns -1 
 var getDaysLen=function(year,month){ 
 if(!( /^d{4}$/.test(year)&&/^d{1,2}$/.test(month))){return -1} 
 var monthDays=[31,28,31,30 ,31,30,31,31,30,31,30,31] 
 //Exists February 29th
 if(month==1&&new Date(year,1,29).getMonth()== 1){monthDays[1]=29} 
 return monthDays[month] 
 } 
 //Display the date list, pass in the year and month (pass in the daily month.For example, February is passed in 2), and the display position 
 var displayDayList=function(year,month,pos){ 
 var daysList=[]; 
 var cells1=$(pos).rows[0] .cells; 
 var cells2=$(pos).rows[1].cells; 
 var daysArr=['日','一','二','三','四','五','六']; 
 //The following month-1 is converted to js month representation
 for(var i=1,l=getDaysLen(year,--month) 1;i var wd=new Date(year,month,i).getDay(); 
 cells1[i-1].className=""; 
 if(wd==0||wd== 6){cells1[i-1].className="weekEnd";} //Add special style for weekends
 //_oldCls saves the default style of the current date
 cells1[i-1].innerText=daysArr[ wd]; 
 cells2[i-1].className="unSelectDay"; 
 cells2[i-1].setAttribute("_oldCls","unSelectDay"); 
 cells2[i-1]. innerText=i>9?i:"0" i; 
 //Match user-defined style 
 var dtStr=year "|" (month 1) "|" i; 
 if((", " styleData.join(',') ",").indexOf("," dtStr ",")>-1){ 
 cells2[i-1].className="unSelectDay " dataStyle[dtStr]; 
 cells2[i-1].setAttribute("_oldCls","unSelectDay " dataStyle[dtStr]); 
 } 
 } 
 //If it is the current month, select the current day 
 if( new Date().getMonth()==month){ 
 curSelEl=cells2[new Date().getDate()-1]; 
 curSelEl.className="selectDay"; 
 } 
 for(var j=i-1;j<31;j ){ 
 cells1[j].className=cells2[j].className=""; 
 cells1[j].innerHTML=cells2[j] .innerHTML=" "; , you can directly pass in the DOM element that saves the date content, or the function determines based on the click position 
 var changeInfo=function(e){ 
 e=e||event; 
 var el=e.target|| e.srcElement||e; //The last e: may be the incoming object 
 var day=el.innerText; 
 if(!/^d{1,2}$/.test(day) ) return; //If it is not a date, do nothing
 //Restore the style of the previously selected date
 if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")} 
 curSelEl=el ; //Save the currently processed element
 //Update the style of the selected date
 el.className="selectDay"; 
 var dt=new Date($("year").value,$(" month").value-1,day); 
 //Update information
 $("day").value=day; //Date
 $("weekday").value=['day ','One','Two','Three','Four','Five','Six'][dt.getDay()]; //Day of the week
 $("week").value= calWeek(dt); //Week of the week
 } 
 //Initialization
 window.attachEvent("onload",function(){ 
 var curDate=new Date(),curYear=curDate. getFullYear(); 
 //Display the upper and lower ten years 
 for(var i=-10;i<10;i ){$("year").add(new Option(curYear i,curYear i)) } 
 $("year").selectedIndex=10; //The current year is selected by default
 $("month").selectedIndex=curDate.getMonth(); //The current month
 $("day ").value=curDate.getDate(); //Current date
 $("weekday").value=['日','一','二','三','四','五','Saturday'][curDate.getDay()]; //The current day of the week
 $("week").value=calWeek(); //The current week
 //Change the date or year Update date list
 $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList ")}; 
 //Display a list of dates for the current month and highlight today's date 
 displayDayList(curDate.getFullYear(),curDate.getMonth() 1,"daysList"); 
 }); 

 //Interface for setting styles externally. 
 //Format: ([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f") 
 //If the month is less than 10, do not bring 0 
 var setDateStyle=function(dateArr,style){ 
 if(typeof dateArr!="object")return; 
 if(dateArr instanceof Array){ 
 if(dateArr[0] instanceof Array){ 
 for(var i=0;i } 
 var dataStr= dateArr.join('|'); 
 styleData.push(dataStr); 
 dataStyle[dataStr]=style; 
 return; 
 } 
 } 
 //External interface
 return {setDateStyle:setDateStyle} 
})(); 
//Test style setting
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]], "test"); 

<title> new document </title>
  <meta name="generator" content="editplus">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
 <style type="text/css"> 
    *{font-size:14px} 
    /*日期最外层*/ 
    #logCalendar{width:950px;border-top:1px solid #ccc;border-left:1px solid #ccc} 
    /*日期内部所有单元格*/ 
    #logCalendar td{ 
        border-right:1px solid #ccc;border-bottom:1px solid #ccc; 
        padding-left:5px;text-align:center; 
        height:22px;line-height:22px; 
    } 
    #daysList{border-top:1px solid #ccc;border-left:1px solid #ccc} 
    /*日期列表所有单元格*/ 
    #daysList td{text-align:center;height:22px}

/*周次及星期几的输入框*/ 
    .bd{border:0;text-align:center;color:#00f} 
    /*日期默认样式*/ 
    .unSelectDay{ 
        color:#00f;font-weight:normal; 
        padding:3px;cursor:pointer; 
        text-decoration:underline 
    } 
    /*当前点击的日期样式*/ 
    .selectDay{color:#fff;font-weight:bold;background:#FEB0B0;padding:1px;text-decoration:none;cursor:normal} 
    /*周末样式*/ 
    .weekEnd{color:#f00}

.test{color:#f00;text-decoration:none} 
 </style>

<table cellpadding="3" cellspacing="0" id="logCalendar"> 
    <tr> 
        <td>第<input type="text" name="week" class="bd" readonly size="2">周</td> 
        <td>星期<input type="text" name="weekday" class="bd" readonly size="2">
</td> 
        <td rowspan="2" style="padding:0"> 
            <table width="100%" cellpadding="3" height="100%" cellspacing="0" id="daysList"> 
                <tr> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                </tr> 
                <tr> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                    <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> 
                </tr> 
            </table>
  </td>
        </tr>
    <tr>
    <td>
        <select name="year" id="year"></select><select name="month" id="month">year <option value="1">
    </option>1<option value="2">
    </option>2<option value="3">
    </option>3<option value="4">
    </option>4<option value="5">
    </option>5<option value="6">
    </option>6<option value="7">
    </option>7<option value="8">
    </option>8<option value="9">
    </option>9<option value="10">
    </option>10<option value="11">
    </option>11<option value="12">
    </option>12</select>
  </td>Month<td>
        <input type="text" name="day" size="2" class="bd" id="day">Date</td>
</tr>
    </table>
  <script type="text/javascript"> 
 //2007-12-21 工作日志日期组件 yanwei 
 //使用闭包隐藏所有变量和函数，防止与外界冲突 
var logDateControl=(function(){ 
    var curSelEl;    //当前选中的日期 
    var styleData=[],dataStyle={}; 
    //获取指定id的元素 
    var $=function(id){return document.getElementById(id)} 
    //计算指定日期是第几周（默认为当前日期），该计算方法比较严密准确 
    var calWeek=function(dt){ 
        var calDay=dt||new Date();    //当前要计算的时间 
        var firstDay=new Date(calDay.getFullYear(),0,1);    //本年第一天 
        //计算当前是本年的第几天,00：00为当天开始 
        var daysAll=Math.floor((calDay-firstDay)/1000/60/60/24)+1;     
        //本年第一天星期几 
        var firstDayWeekday=firstDay.getDay();     
        //该结果加到第一周的周一，便于后面计算 
        var diffDay=firstDayWeekday==0?6:firstDayWeekday-1;     
        daysAll=daysAll+diffDay; 
        return Math.ceil(daysAll/7);    //返回计算结果 
    } 
    //计算一个月多少天,年份4位数字，月份1-2位数字（应该是js日期格式如1月传入0）,数据非法返回-1 
    var getDaysLen=function(year,month){ 
        if(!(/^\d{4}$/.test(year)&&/^\d{1,2}$/.test(month))){return -1} 
        var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31] 
        //存在2月29日 
        if(month==1&&new Date(year,1,29).getMonth()==1){monthDays[1]=29} 
        return monthDays[month] 
    } 
    //显示日期列表,传入年、月(按日常月份传入。如二月传入2)、及显示位置 
    var displayDayList=function(year,month,pos){ 
        var daysList=[]; 
        var cells1=$(pos).rows[0].cells; 
        var cells2=$(pos).rows[1].cells; 
        var daysArr=['日','一','二','三','四','五','六']; 
        //下面的month-1转换为js月份表示 
        for(var i=1,l=getDaysLen(year,--month)+1;i<l;i++){ 
            var wd=new Date(year,month,i).getDay(); 
            cells1[i-1].className=""; 
            if(wd==0||wd==6){cells1[i-1].className="weekEnd";}    //为周末添加特殊样式 
            //_oldCls保存当前日期的默认样式 
            cells1[i-1].innerText=daysArr[wd]; 
            cells2[i-1].className="unSelectDay"; 
            cells2[i-1].setAttribute("_oldCls","unSelectDay"); 
            cells2[i-1].innerText=i>9?i:"0"+i; 
            //匹配用户自定义样式 
            var dtStr=year+"|"+(month+1)+"|"+i; 
            if((","+styleData.join(',')+",").indexOf(","+dtStr+",")>-1){ 
                cells2[i-1].className="unSelectDay "+dataStyle[dtStr]; 
                cells2[i-1].setAttribute("_oldCls","unSelectDay "+dataStyle[dtStr]); 
            } 
        } 
        //如果是当前月则选中当日 
        if(new Date().getMonth()==month){ 
            curSelEl=cells2[new Date().getDate()-1]; 
            curSelEl.className="selectDay"; 
        } 
        for(var j=i-1;j<31;j++){ 
            cells1[j].className=cells2[j].className=""; 
            cells1[j].innerHTML=cells2[j].innerHTML="  "; 
        } 
        $(pos).onclick=function(){changeInfo()} 
    } 
    //根据选择的值进行处理周次和周几的调整,可以直接传入保存日期内容的dom元素，或者函数根据点击位置判断 
    var changeInfo=function(e){ 
        e=e||event; 
        var el=e.target||e.srcElement||e;    //最后一个e：可能是传入的对象 
        var day=el.innerText; 
        if(!/^\d{1,2}$/.test(day)) return;    //如果不是日期什么都不做 
        //恢复之前选中日期的样式 
        if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")} 
        curSelEl=el;    //保存当前处理的元素 
        //更新选中日期的样式 
        el.className="selectDay"; 
        var dt=new Date($("year").value,$("month").value-1,day); 
        //更新信息 
        $("day").value=day;    //日期 
        $("weekday").value=['日','一','二','三','四','五','六'][dt.getDay()];    //星期几 
        $("week").value=calWeek(dt);    //第几周 
    } 
    //初始化 
    window.attachEvent("onload",function(){ 
        var curDate=new Date(),curYear=curDate.getFullYear(); 
        //显示上下十年 
        for(var i=-10;i<10;i++){$("year").add(new Option(curYear+i,curYear+i))} 
        $("year").selectedIndex=10;    //默认选中当前年份 
        $("month").selectedIndex=curDate.getMonth();    //当前月份 
        $("day").value=curDate.getDate();    //当前日期 
        $("weekday").value=['日','一','二','三','四','五','六'][curDate.getDay()];    //当前星期几 
        $("week").value=calWeek();    //当前第几周 
        //改变日期或年份更新日期列表 
        $("year").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList")}; 
        //显示当月日期列表,并高亮当天的日期 
        displayDayList(curDate.getFullYear(),curDate.getMonth()+1,"daysList"); 
    }); 
     
    //对外设定样式的接口。 
    //格式：([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f") 
    //如果月份小于10不要带0 
    var setDateStyle=function(dateArr,style){ 
        if(typeof dateArr!="object")return; 
        if(dateArr instanceof Array){ 
            if(dateArr[0] instanceof Array){ 
                for(var i=0;i<dateArr.length;i++) setDateStyle(dateArr[i],style); 
            } 
            var dataStr=dateArr.join('|'); 
            styleData.push(dataStr); 
            dataStyle[dataStr]=style; 
            return; 
        } 
    } 
    //对外接口 
    return {setDateStyle:setDateStyle} 
})(); 
//测试样式设定 
logDateControl.setDateStyle([[2007,12,15],[2007,11,12]],"test"); 
 </script>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7715

Java Tutorial

1641

CakePHP Tutorial

1395

Laravel Tutorial

1289

PHP Tutorial

1232

Related knowledge

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles