繁体   English   中英

如何使用javascript在html上获取上个月和下个月的结果

[英]how to get previous month and next month results on html using javascript

我有这段代码,您可以选择日期并根据它获得结果。 现在,在选择月份和年份的地方,我需要一个显示上个月的按钮和另一个显示下个月的按钮。 这样第二天和前一天。 有人可以帮我这个代码片段。

1. Button one - Previous month 2. Button two - Next month 3. Button three - Previous Day 4. Button four - Next Day

所有结果应在HTML页面上。

 <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="text/css"> TD, TH {text-align:center} </STYLE> <SCRIPT LANGUAGE="JavaScript"> function getFirstDay(theYear, theMonth){ var firstDate = new Date(theYear,theMonth,1) return firstDate.getDay() } function getMonthLen(theYear, theMonth) { var oneDay = 1000 * 60 * 60 * 24 var thisMonth = new Date(theYear, theMonth, 1) var nextMonth = new Date(theYear, theMonth + 1, 1) var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay) return len } var theMonths = ["January","February","March","April","May","June","July","August", "September","October","November","December"] function getObject(obj) { var theObj if (document.all) { if (typeof obj == "string") { return document.all(obj) } else { return obj.style } } if (document.getElementById) { if (typeof obj == "string") { return document.getElementById(obj) } else { return obj.style } } return null } function populateTable(form) { var theMonth = form.chooseMonth.selectedIndex var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text) // initialize date-dependent variables var firstDay = getFirstDay(theYear, theMonth) var howMany = getMonthLen(theYear, theMonth) // fill in month/year in table header getObject("tableHeader").innerHTML = theMonths[theMonth] + " " + theYear // initialize vars for table creation var dayCounter = 1 var TBody = getObject("tableBody") // clear any existing rows while (TBody.rows.length > 0) { TBody.deleteRow(0) } var newR, newC var done=false while (!done) { // create new row at end newR = TBody.insertRow(TBody.rows.length) for (var i = 0; i < 7; i++) { // create new cell at end of row newC = newR.insertCell(newR.cells.length) if (TBody.rows.length == 1 && i < firstDay) { // no content for boxes before first day newC.innerHTML = "" continue } if (dayCounter == howMany) { // no more rows after this one done = true } // plug in date (or empty for boxes after last day) newC.innerHTML = (dayCounter <= howMany) ? dayCounter++ : "" } } } function fillYears() { var today = new Date() var thisYear = today.getFullYear() var yearChooser = document.dateChooser.chooseYear for (i = thisYear; i < thisYear + 5; i++) { yearChooser.options[yearChooser.options.length] = new Option(i, i) } setCurrMonth(today) } // set month choice to current month function setCurrMonth(today) { document.dateChooser.chooseMonth.selectedIndex = today.getMonth() } </SCRIPT> </HEAD> <BODY onLoad="fillYears(); populateTable(document.dateChooser)"> <H1>Calender</H1> <HR> <TABLE style="width:100%;height:80%;" ID="calendarTable" BORDER=1 ALIGN="center"> <TR> <TH ID="tableHeader" COLSPAN=7></TH> </TR> <TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH> <TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR> <TBODY ID="tableBody"></TBODY> <TR> <TD COLSPAN=7> <P> <FORM NAME="dateChooser"> <SELECT NAME="chooseMonth" onChange="populateTable(this.form)"> <OPTION SELECTED>January<OPTION>February <OPTION>March<OPTION>April<OPTION>May <OPTION>June<OPTION>July<OPTION>August <OPTION>September<OPTION>October <OPTION>November<OPTION>December </SELECT> <SELECT NAME="chooseYear" onChange="populateTable(this.form)"> </SELECT> </FORM> </P></TD> </TR> </TABLE> </BODY> </HTML 

我建议使用moment.js。 当您使用时间和日期时,它可以提供很多帮助。

例如,按下“下个月”按钮后,可以使用moment().add(1, 'months')将1个月添加到当前日期。 您可以在切换后存储日期,例如在数据属性或隐藏的输入或...上。

您可以在https://momentjs.com/docs/上找到完整的文档

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM