(使用方法:呼叫initbartime(id,evn)，第乙個引數是要渲染div的id，第二個引數是點選日期發生的事件)
html思路分析:
首先我們看出來這個日曆分為兩個部分
第一部分是上面，整體的你去年月日日期的顯示。
第二部分是下面，具體某一天以及星期的日期顯示。
第三部分是下面兩段的左右箭頭，以及滾動功能。
上面年月日部分的日期我們用乙個 p 標籤來實現。
下面則是用兩組ul來實現，並且加入隱藏於用於記錄每個日期的具體年月日。
左右箭頭我們則是用兩個a標籤包含特殊樣式的span來實現。
js具體實現:
簡單的分析一下日曆的功能。
1.進入頁面首先在最中間一格載入出當天的日期，前後依次遞增遞減。
2.頂部顯示具體年月日顯示選中的日期。
3.左右箭頭翻頁每次跳轉一天。
4.點選日期，改變選中日期的樣式，改變頂部年月日的文字顯示。
現在我們來具體分析一下實現方法。
1.文字賦值方法。(我們需要給下面的7個li根據日期，填寫上對應的文字，並且改變樣式)。
2.點選日期方法。(點選具體日期，我們根據點選li節點的隱藏域需要改變頂部的日期，並且改變相應樣式)。
3.改變選中節點樣式方法。(根據頂部顯示的選中日期，與li中的隱藏於比較，日期相等的改變選中樣式)。
4.獲取前一天後一天的方法。
5.前後翻頁方法。(根據獲取前一天後一天的方法，對中間的li日期進行改變，通過中間的li日期依次遞增遞減獲取其他日期，依次賦值)。
下面則是:具體的js**。
var now = new第二個日曆控制項，整月的日曆。date();
/** 初始化時間控制項，傳入要渲染div的id，和時間的點選事件 */
function
initbartime(id,evn))}/*
* 時間顯示 */
function
showtime()
/** 通過時間給文字賦值 */
function
setdatatext(d)
else
}}/*
* 獲取時間 */
function
clicktime(id)
/**改變選中顯示時間 */
function
changetime(time)
/** 改變選中結點樣式 */
function
changetimestyle()}/*
* 時間切換,向左滾動,後退（左箭頭點選事件） */
function
nexttime()
/** 時間切換,向右滾動,前進（右箭頭點選事件） */
function
lasttime()
/** 獲取後一天的時間 */
function
getnextday(d)
/** 獲取前一天的時間 */
function
getlastday(d)
/** 獲取星期 */
function
getweek(day)
return
week;
}
(使用方法:initcalendar(id,evn)第乙個引數是要渲染div的id，第二個引數是點選日期發生的事件。)
html思路分析
首先我們看出來這個日曆分為四部分。
第一部分，最上方的年顯示。
第二部分，年顯示下面的一行月顯示。並且有左右翻頁箭頭。
第三部分，日曆主體顯示，顯示單月所有日期與每個日期對應的星期。
第四部分，當月選中日期的現實。
第一部分，我們用乙個p標籤來實現。
第二部分，我們用乙個ul來實現，ul兩端的箭頭用a標籤包含特殊樣式的span來實現。
第三部分，我們用乙個ul來實現，前7個li固定的顯示週日到週六。後面的li顯示對應的日期。
第四部分，當月選中日期的現實，我們用乙個div來實現。
選中日期我們分別用三個隱藏域記錄年月日。
js的具體實現:
首先我們來看一下日曆所需要的功能。
1.進入頁面首先載入當年當月的日曆，並且預設選中當天。
2.點選左右翻頁箭頭一翻翻六個月的月份。
3.點選月份，切換選中月份的日曆，並且選中上次選中的日期，若當月沒有那個日期則不顯示。
4.點選選中具體的日期，最下方的顯示跟著一起變動，並且改變相應的選中狀態。
js重要方法:
1.初始化時間方法，初始化介面上所有顯示的顯示的年月日，以及隱藏域的值。
2.畫日曆方法，每次更改選擇月，則需要對應的重新畫日曆，並且設定選中月。
3.選擇日期方法，改變頁面上對應選擇日期的文字顯示。
4.選擇月方法，改變對應的選擇月份，與選擇年份，改變介面上的顯示值，改變隱藏域的值。
5.左右翻頁切換月份方法，一次點選翻半年，改變月份文字，並且改變對應月份文字的年隱藏域，根據索引改變選擇月。
下面則是:具體的js**。
var最後:關於載入html。evnclick ;
/** 初始化時間控制項，傳入要渲染div的id與日曆的點選事件 */
function
initcalendar(id,evn))}/*
* 初始化時間 */
function
inittime()
else
if(selectmonth-(3-i)<=0)
else
}}/*
* 選擇月的日曆 */
function
setcalendar()}}
$("#caldayli li").click(function())}/*
* 清空日曆 */
function
clearcalendar()}/*
* 選擇日期 */
function
setdaystyle(dom)
/** 選擇月份 */
function
setmonthstyle(dom)/*
*/function
setnextmonth()
if((m*1+6) == 12)
$("#calmonthli li").eq(i).html(12+"月");
else
$("#calmonthli li").eq(i).html((m*1+6)%12+"月");//
設定當月li
}
//改變選擇月
var selectmonth = $("#selectmonth").val();
$("#selectmonth").val((selectmonth*1+6)%12);
//改變選擇年
var index = $("#selectmonindex").val();//
獲取選中月下標
var syear = $("#hidyear"+index).val();//
獲取選中月對應年
$("#selectyear").val(syear);//
設定選中年
$("#pcalyear").html(syear+ "年");//
改變顯示年
//改變日曆
setcalendar();
setdisdate();
//改變顯示日期}/*
*/function
setlastmonth()
if((m*1-6+12) == 12)
$("#calmonthli li").eq(i).html(12+"月");
else
$("#calmonthli li").eq(i).html((m*1-6+12)%12+"月");//
設定當月li
}
//改變選擇月
var selectmonth = $("#selectmonth").val();
$("#selectmonth").val((selectmonth*1-6+12)%12);
//改變選擇年
var index = $("#selectmonindex").val();//
獲取選中月下標
var syear = $("#hidyear"+index).val();//
獲取選中月對應年
$("#selectyear").val(syear);//
設定選中年
$("#pcalyear").html(syear+ "年");//
改變顯示年
//改變日曆
setcalendar();
setdisdate();
//改變顯示日期}/*
* 設定顯示日期 */
function
setdisdate()
/** 獲得星期 */
function
getweek(day)
return
week;
}
之前想過利用jquery的load動態載入html頁渲染到某個div中，但因為其是非同步的方法，載入順序會出問題，導致其他js無法正常執行，且增加了http的請求次數，
故將html**，寫成字串，放入js中直接載入。
如果各位有更好的辦法，請賜教。
自己用的日曆控制項
var striframe with webcalendar.iframe function webcalendar 初始化日曆的設定 var webcalendar new webcalendar function calendar 主調函式 o.display webcalendar.ifram...
關於時間戳自己寫的兩個方法
時間工具類,轉換時間用 inte ce timehelper nsobject 單例 instancetype defaulthelper 返回乙個格式為 2015 10 31格式的日期 輸入的數字為十位 nsstring timeformatted nsstring totalsecond 計算兩...
收藏的乙個js日曆控制項
收藏的乙個js日曆控制項 setday.js function cnverycalendar if y 100 0 return 29 generate codes this.generatecalendartable function loop each days in current month...