溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery日歷控件代碼

發(fā)布時(shí)間：2020-06-05 07:40:41 來源：網(wǎng)絡(luò) 閱讀：345 作者：sanye123 欄目：web開發(fā)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery日歷控件代碼_網(wǎng)頁代碼站(www.webdm.cn)</title>
<script type="text/javascript" src="/themes/script/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
//jquery等待頁面加載完執(zhí)行以下程序
$(document).ready(function(){
  //點(diǎn)擊“關(guān)閉”按鈕關(guān)閉日歷
   $(".close").click(function(){
       $(".datetime_pick").slideUp();
   })
    //點(diǎn)擊時(shí)間輸入框，彈出日歷
   $(".timepick").focus(function(){
       var year=$(".year_select").val();
       var month2=$(".month_select").val();
         var data=new Date(year,month2,0);//取值并實(shí)例化時(shí)間對象，最后一個(gè)參數(shù)為0，能夠取得某年某月一共有多少天
     var sum_day=data.getDate();//取得某月一共的天數(shù)
     var j=1;
      var month="";
       for(j=1;j<=sum_day;j++)
 {    if(j<10) j="0"+j;//小于10的日期，前面加0
  month+="<li year="+year+" day="+j+">"+j+"</li>";//通過for循環(huán)輸入每月的日歷，并賦值給month變量，day屬性表示具體幾號，year屬性表示哪一年
}
$(".showday").html(month);//輸出變量的值
//當(dāng)鼠標(biāo)移到每個(gè)日期上，輸出這一天是星期幾
$(".showday li").mouseover(function(){
    var date=$(this).attr("day");
 var data1=new Date(year,month2-1,date);//實(shí)例化Date對象
  var xingqi=data1.getDay();//取得某一天是星期幾
  switch(xingqi){
   case 0: var weekday="星期天";
   break;
   case 1: var weekday="星期一";
   break;
   case 2: var weekday="星期二";
   break;
   case 3: var weekday="星期三";
   break;
   case 4: var weekday="星期四";
   break;
   case 5: var weekday="星期五";
   break;
   case 6: var weekday="星期六";
   break;
  }
  $(".show_xingqi").text("今天是"+weekday);
  $(".show_xingqi").show();//輸出
})
//鼠標(biāo)移開，顯示星期幾的窗口消失
$(".showday").mouseout(function(){
    $(".show_xingqi").hide();
})
//點(diǎn)擊某一天后，彈出確認(rèn)框，當(dāng)點(diǎn)擊“確定”時(shí)，更改小時(shí)，分，秒選擇框時(shí)讀取選擇框的值并輸出時(shí)間到提交框里
 $(" .showday li").click(function(){
       var day=$(this).attr("day");
        var real_time=year+"-"+month2+"-"+day;
               var msg=confirm("要選擇時(shí)間嗎？");
               if(msg){
$(".hour_select,.minute_select,.second_select").change(function(){
              //取得時(shí)，分，秒下拉框的值，到變量里
                   var month2=$(".month_select").val();
                   var minute=$(".minute_select").val();
                   var second=$(".second_select").val();
                         var hour=$(".hour_select").val();
                         //連接變量
                   var real_time=year+"-"+month2+"-"+day;
                    var last_time=real_time+" "+hour+":"+minute+":"+second;
                    //輸出變量到輸入框里
                            $(".timepick").val(last_time);
                   })
                   }
               else {
               //當(dāng)點(diǎn)擊“取消”時(shí)，下拉框值為0
                       var minute=$(".minute_select").val("0");
                   var second=$(".second_select").val("0");
                         var hour=$(".hour_select").val("0");
                             var month2=$(".month_select").val();
                   var real_time=year+"-"+month2+"-"+day;
                   $(".timepick").val(real_time);
                   if(real_time)$(".datetime_pick").hide();
                   }
 })
   $(".datetime_pick").slideDown();//日期選擇模塊顯示
   })

//當(dāng)更改具體月份或年份時(shí)顯示不同的日歷
   $(".month_select,.year_select").change(function(){
        var year=$(".year_select").val();
       var month2=$(".month_select").val();
      var data=new Date(year,month2,0);//實(shí)例化時(shí)間對象，最后一個(gè)參數(shù)為0
     var sum_day=data.getDate();
     var j=1;
      var month="";
       for(j=1;j<=sum_day;j++)
 {   if(j<10) j="0"+j;
  month+="<li year="+year+" day="+j+">"+j+"</li>";
}
$(".showday").html(month);//輸出的變量值
//顯示每一天是星期幾
$(".showday li").mouseover(function(){
    var date=$(this).attr("day");
 var data1=new Date(year,month2-1,date);//實(shí)例化，最后一個(gè)參數(shù)是日期
  var xingqi=data1.getDay();
  switch(xingqi){
   case 0: var weekday="今天是星期天";
   break;
   case 1: var weekday="今天是星期一";
   break;
   case 2: var weekday="今天是星期二";
   break;
   case 3: var weekday="今天是星期三";
   break;
   case 4: var weekday="今天是星期四";
   break;
   case 5: var weekday="今天是星期五";
   break;
   case 6: var weekday="今天是星期六";
   break;
  }
  $(".show_xingqi").text(weekday);
  $(".show_xingqi").show();//顯示星期幾的模塊
})
//點(diǎn)擊某一天，出現(xiàn)彈出框，點(diǎn)擊“確認(rèn)”選擇時(shí)間后輸出；點(diǎn)擊“取消”直接輸出
 $(" .showday li").click(function(){
       var day=$(this).attr("day");
        var real_time=year+"-"+month2+"-"+day;
               var msg=confirm("要選擇時(shí)間嗎？");
               if(msg){
$(".hour_select,.minute_select,.second_select").change(function(){
      var month2=$(".month_select").val();
                   var minute=$(".minute_select").val();
                   var second=$(".second_select").val();
                         var hour=$(".hour_select").val();
                   var real_time=year+"-"+month2+"-"+day;
                    var last_time=real_time+" "+hour+":"+minute+":"+second;
                            $(".timepick").val(last_time);
                   })
                   }
               else {
                       var minute=$(".minute_select").val("0");
                   var second=$(".second_select").val("0");
                         var hour=$(".hour_select").val("0");
                             var month2=$(".month_select").val();
                   var real_time=year+"-"+month2+"-"+day;
                   $(".timepick").val(real_time);
                   if(real_time)$(".datetime_pick").hide();
                   }
   })
   })
})
</script>
<style>
.showday{ width:238px; height:150px; border:1px #CCC solid;}
.time_controller{ width:300px; height:50px;}
.datetime_pick{width:300px;height:260px;display:none;position:relative; }
.showday li{ width:20px; height:15px; text-align:center; line-height:15px; float:left; margin:5px 6px; list-style:none; border:1px #ccc solid; cursor:pointer;}
.showday li:hover{ color:#FFF; background-color:#39F;}
.show_xingqi{width:110px; height:40px; text-align:center; line-height:40px;display:none; position:absolute; top:50px; left:250px; color:#FFF; font-size:14px; background:url(/jscss/demoimg/201308/arrow.gif) 0 0 no-repeat; }
</style>
</head>

<body>
<!-- 代碼 開始 -->

<div class="time_controller">
時(shí)間：<input type="text" size="40" name="time" class="timepick" />
<div class="datetime_pick">
<div class="show_xingqi">

</div>
<font color="#FF0000" size="2">選擇日期：</font>
<select class="year_select">
<option value="2000">2000</option>
<option  value="2001">2001</option>
<option  value="2002">2002</option>
<option  value="2003">2003</option>
<option  value="2004">2004</option>
<option  value="2005">2005</option>
<option  value="2006">2006</option>
<option  value="2007">2007</option>
<option  value="2008">2008</option>
<option  value="2009">2009</option>
<option  value="2010">2010</option>
<option  value="2011">2011</option>
<option  value="2012">2012</option>
<option  value="2013">2013</option>
<option  value="2014">2014</option>
<option  value="2015">2015</option>
<option  value="2016">2016</option>
<option  value="2017">2017</option>
<option  value="2018">2018</option>
<option  value="2019">2019</option>
<option  value="2020">2020</option>

</select>
<font color="blue" size="2">年</font>

<select class="month_select">
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>

</select>
<font color="blue" size="2">月</font>
<a href="#" class="close"><font color="red">關(guān)閉</font></a>

<div class="showday">



</div>
<font color="#FF0000" size="2">選擇時(shí)間：</font>
<select class="hour_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
</select>
<font color="blue" size="2">時(shí)</font>
<select class="minute_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option  value="26">26</option>
<option  value="27">27</option>
<option  value="28">28</option>
<option  value="29">29</option>
<option  value="30">30</option>
<option  value="31">31</option>
<option  value="32">32</option>
<option  value="33">33</option>
<option  value="34">34</option>
<option  value="35">35</option>
<option  value="36">36</option>
<option value="37">37</option>
<option  value="38">38</option>
<option  value="39">39</option>
<option  value="40">40</option>
<option  value="41">41</option>
<option  value="42">42</option>
<option  value="43">43</option>
<option  value="44">44</option>
<option  value="45">45</option>
<option  value="46">46</option>
<option  value="47">47</option>
<option  value="48">48</option>
<option  value="49">49</option>
<option  value="50">50</option>
<option value="51">51</option>
<option  value="52">52</option>
<option  value="53">53</option>
<option  value="54">54</option>
<option  value="55">55</option>
<option  value="56">56</option>
<option  value="57">57</option>
<option  value="58">58</option>
<option  value="59">59</option>
<option  value="60">60</option>
</select>
<font color="blue" size="2">分</font>
<select class="second_select">
<option value="00">00</option>
<option value="01">01</option>
<option  value="02">02</option>
<option  value="03">03</option>
<option  value="04">04</option>
<option  value="05">05</option>
<option  value="06">06</option>
<option  value="07">07</option>
<option  value="08">08</option>
<option  value="09">09</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
<option value="13">13</option>
<option  value="14">14</option>
<option  value="15">15</option>
<option  value="16">16</option>
<option  value="17">17</option>
<option  value="18">18</option>
<option  value="19">19</option>
<option  value="20">20</option>
<option  value="21">21</option>
<option  value="22">22</option>
<option  value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option  value="26">26</option>
<option  value="27">27</option>
<option  value="28">28</option>
<option  value="29">29</option>
<option  value="30">30</option>
<option  value="31">31</option>
<option  value="32">32</option>
<option  value="33">33</option>
<option  value="34">34</option>
<option  value="35">35</option>
<option  value="36">36</option>
<option value="37">37</option>
<option  value="38">38</option>
<option  value="39">39</option>
<option  value="40">40</option>
<option  value="41">41</option>
<option  value="42">42</option>
<option  value="43">43</option>
<option  value="44">44</option>
<option  value="45">45</option>
<option  value="46">46</option>
<option  value="47">47</option>
<option  value="48">48</option>
<option  value="49">49</option>
<option  value="50">50</option>
<option value="51">51</option>
<option  value="52">52</option>
<option  value="53">53</option>
<option  value="54">54</option>
<option  value="55">55</option>
<option  value="56">56</option>
<option  value="57">57</option>
<option  value="58">58</option>
<option  value="59">59</option>
<option  value="60">60</option>
</select>
<font color="blue" size="2">秒</font><br>
</div>
</div>
<!-- 代碼 結(jié)束 -->
<br>
<p><a >網(wǎng)頁代碼站</a> - 最專業(yè)的網(wǎng)頁代碼下載網(wǎng)站 - 致力為中國站長提供有質(zhì)量的網(wǎng)頁代碼！</p>
</body>
</html>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手