Question

我想使用angularjs进行垂直导航并在其中显示当前周的日期和日期，这样当我点击导航div时，它会提醒我选择的日期。

我用不同的模板在plunker中尝试过，但是无法实现它。

https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=kitchen-sink

请看一下上面的模板。这太复杂了，我只需要＆＃34;周＆＃34;要显示的日期和模板中没有事件。

请帮我开发一个更简单的版本。

由于

Answer 1

＆＃13;

function displayCalendar(){
 var calendardate = document.getElementById("txtDate").value;
// alert(calendardate);
   var toeknisedate= calendardate.split("-");
 //alert('onchange');
 var htmlContent ="";
 var FebNumberOfDays ="";
 var counter = 1;
 
 
 var dateNow = new Date();
 var month = dateNow.getMonth();

 var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
 var prevMonth = month -1;
 if(!document.getElementById("txtDate").value)
 {
 //alert('if')
 var day = dateNow.getDate();
 var uplimit=day+5;
 var downlimit=day-5;

 }
 else
 {
 //alert('else')
 
 var day=parseInt(toeknisedate[2]);
 var uplimit=day+5;
 var downlimit=day-5;
 
 }
 counter=downlimit;
 var weekday=dateNow.getDay();
 var year = dateNow.getFullYear();
// alert(day);
 
 
 //alert(uplimit);
 
 //Determing if February (28,or 29)  
 if (month == 1){
    if ( (year%100!=0) && (year%4==0) || (year%400==0)){
      FebNumberOfDays = 29;
    }else{
      FebNumberOfDays = 28;
    }
 }
 

 
 
 // names of months and week days.
 var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
 var dayNames = ["SUN","MON","TUE","WED","THU","FRI", "SAT"];
 var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]
 
 
 // days in previous month and next one , and day of week.
 var nextDate = new Date(nextMonth +' 1 ,'+year);
 var weekdays= nextDate.getDay();
 var weekdays2 = weekdays
 var numOfDays = dayPerMonth[month];
     
 
 
 
 // this leave a white space for days of pervious month.
 while (weekdays>0){
    htmlContent += "<div class='monthPre'></div>";
 
 // used in next loop.
     weekdays--;
 }
 
 // loop to build the calander body.
 while (counter<=uplimit){

     // When to start new line.
    if (weekdays2 > 6){
        weekdays2 = 0;
        htmlContent += "<div></div>";
    }
 
 
 
    // if counter is current day.
    // highlight current day using the CSS defined in header.
    if (counter == day){
        htmlContent +="<div class='dayNow' style='height:72px;width: 80px;border:1px solid #ff0000;margin-top: 1px;' onClick='currentdate("+counter+");'  onMouseOver='this.style.width=\"100px;\";' "+
        "onMouseOut='this.style.background=\"#FFFFFF\";'><br><span style='font-weight: 600; color: #058EFF;FONT-SIZE: 18px;'>"+counter+"</span><br><span style='font-size: 18px;font-weight: 600;color: #41738C;OPACITY: 0.8;'>"+dayNames[weekdays2]+"</span></div>";
    }else{
        htmlContent +="<div class='monthNow' style='height:72px;width: 80px;border:2px solid #eeeeee;margin-top: 1px;' onClick='currentdate("+counter+");' onMouseOver='this.style.border=\"1px solid #FF0000\";'"+
        " onMouseOut='this.style.border=\"2px solid #eeeeee\"'><br><span style='font-weight: 600; color: #058EFF;FONT-SIZE: 18px;'>"+counter+"</span><br><span style='font-size: 18px;font-weight: 600;color: #41738C;OPACITY: 0.8;'>"+dayNames[weekdays2]+"</span></div>";    
 
    }
	
	
	
	
	
	
	
	
	
	
   
    weekdays2++;
    counter++;
	
 }
 
 
 
 // building the calendar html body.
 var calendarBody = "<div class='calendar'> <div class='monthNow'></div>";
 
 calendarBody += "";
 calendarBody += htmlContent;
 calendarBody += "";
 // set the content of div .
 document.getElementById("calendar").innerHTML=calendarBody;
 
}

＆＃13;

.monthPre{
 color: gray;
 text-align: center;
}
.monthNow{
 color: blue;
 text-align: center;
}
.dayNow{
 border: 2px solid black;
 color: #FF0000;
 text-align: center;
}
.calendar td{
 htmlContent: 2px;
 width: 40px;
}
.monthNow th{
 background-color: #000000;
 color: #FFFFFF;
 text-align: center;
}
.dayNames{
 background: #0FF000;
 color: #FFFFFF;
 text-align: center;
}

＆＃13;

<body onload="displayCalendar()"> 
 

<input type = "date" id = "txtDate" onchange="displayCalendar()" value=""/>
 
<div id="calendar"></div> 


</body>

＆＃13;

嗨，大家好，

我能够解决上面列出的查询，这里是一个正在运行的垂直日历样本，其中当前日期位于中心，它将显示前四天和下一天参考当前日期。

此代码段的唯一问题是它还会显示负值，但很快就会提供更新。

谢谢你们所有人：）

使用angularjs

1 个答案: