一个jQuery的日期控件

楼主
我是社区第3401位番薯,欢迎点我头像关注我哦~
本帖最后由 夏娃 于 2015-12-16 14:30 编辑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  2. <head>
  3.         <title>jCalendar — a jQuery calendar by ted serbinski</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.         <script type="text/javascript" charset="utf-8" src="jcalendar.js"></script>
  6.   <link rel="stylesheet" href="jcalendar.css" type="text/css" media="screen" charset="utf-8">
  7.         <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
  8.           <script type="text/javascript" charset="utf-8">
  9.                 $(document).ready(function() {
  10.                    $('fieldset.jcalendar').jcalendar();
  11.                 });
  12.           </script>
  13. </head>

  14. <body>
  15.   <div id="wrapper">

  16.     <h2>demo</h2>
  17.     <form>
  18.     <fieldset class="jcalendar">
  19.        <legend>Select date</legend>
  20.        <div class="jcalendar-wrapper">
  21.        <div class="jcalendar-selects">
  22.          <select name="day" id="day" class="jcalendar-select-day">
  23.            <option value="0"></option>
  24.            <option value="1">1</option>
  25.            <option value="2">2</option>
  26.            <option value="3">3</option>
  27.            <option value="4">4</option>
  28.            <option value="5">5</option>
  29.            <option value="6">6</option>
  30.            <option value="7">7</option>
  31.            <option value="8">8</option>
  32.            <option value="9">9</option>
  33.            <option value="10">10</option>
  34.            <option value="11">11</option>
  35.            <option value="12">12</option>
  36.            <option value="13">13</option>
  37.            <option value="14">14</option>
  38.            <option value="15">15</option>
  39.            <option value="16">16</option>
  40.            <option value="17">17</option>
  41.            <option value="18">18</option>
  42.            <option value="19">19</option>
  43.            <option value="20">20</option>
  44.            <option value="21">21</option>
  45.            <option value="22">22</option>
  46.            <option value="23">23</option>
  47.            <option value="24">24</option>
  48.            <option value="25">25</option>
  49.            <option value="26">26</option>
  50.            <option value="27">27</option>
  51.            <option value="28">28</option>
  52.            <option value="29">29</option>
  53.            <option value="30">30</option>
  54.            <option value="31">31</option>
  55.          </select>
  56.          <select name="month" id="month" class="jcalendar-select-month">
  57.            <option value="0"></option>
  58.            <option value="1">January</option>
  59.            <option value="2">February</option>
  60.            <option value="3">March</option>
  61.            <option value="4">April</option>
  62.            <option value="5">May</option>
  63.            <option value="6">June</option>
  64.            <option value="7">July</option>
  65.            <option value="8">August</option>
  66.            <option value="9">September</option>
  67.            <option value="10">October</option>
  68.            <option value="11">November</option>
  69.            <option value="12">December</option>
  70.          </select>
  71.          <select name="year" id="year" class="jcalendar-select-year">
  72.            <option value="0"></option>
  73.            <option value="1982">1982</option>
  74.            <option value="1983">1983</option>
  75.            <option value="1984">1984</option>
  76.            <option value="1985">1985</option>
  77.            <option value="1986">1986</option>
  78.            <option value="1987">1987</option>
  79.            <option value="1988">1988</option>
  80.            <option value="1989">1989</option>
  81.            <option value="1990">1990</option>
  82.            <option value="1991">1991</option>
  83.            <option value="1992">1992</option>
  84.            <option value="1993">1993</option>
  85.            <option value="1994">1994</option>
  86.            <option value="1995">1995</option>
  87.            <option value="1996">1996</option>
  88.            <option value="1997">1997</option>
  89.            <option value="1998">1998</option>
  90.            <option value="1999">1999</option>
  91.            <option value="2000">2000</option>
  92.            <option value="2001">2001</option>
  93.            <option value="2002">2002</option>
  94.            <option value="2003">2003</option>
  95.            <option value="2004">2004</option>
  96.            <option value="2005">2005</option>
  97.            <option value="2006">2006</option>
  98.            <option value="2007">2007</option>
  99.            <option value="2008">2008</option>
  100.            <option value="2009">2009</option>
  101.            <option value="2010">2010</option>
  102.            <option value="2011">2011</option>
  103.            <option value="2012">2012</option>
  104.            <option value="2013">2013</option>
  105.            <option value="2014">2014</option>
  106.            <option value="2015">2015</option>
  107.            <option value="2016">2016</option>
  108.            <option value="2017">2017</option>
  109.            <option value="2018">2018</option>
  110.            <option value="2019">2019</option>
  111.            <option value="2020">2020</option>
  112.            <option value="2021">2021</option>
  113.            <option value="2022">2022</option>
  114.            <option value="2023">2023</option>
  115.            <option value="2024">2024</option>
  116.            <option value="2025">2025</option>
  117.            <option value="2026">2026</option>
  118.            <option value="2027">2027</option>
  119.            <option value="2028">2028</option>
  120.            <option value="2029">2029</option>
  121.            <option value="2030">2030</option>
  122.            <option value="2031">2031</option>
  123.            <option value="2032">2032</option>
  124.          </select>
  125.        </div>
  126.        </div>
  127.     </fieldset>
  128.     </form>
  129.   </div>
  130.   

  131. </body>
  132. </html>
复制代码



分享扩散:

沙发
发表于 2012-5-18 16:28:34
本帖最后由 夏娃 于 2015-12-16 14:30 编辑

{:soso_e179:}


板凳
发表于 2012-5-18 17:04:52
本帖最后由 夏娃 于 2015-12-16 14:31 编辑

要能跟个效果图就好了

地板
发表于 2012-5-18 19:23:05
本帖最后由 夏娃 于 2015-12-16 14:30 编辑

要能跟个效果图就好了[/quote]
效果图马上跟上


5楼
发表于 2012-5-20 21:26:12
本帖最后由 夏娃 于 2015-12-16 14:30 编辑

效果图马上跟上[/quote]
不错,我一直想找一个好用的只有年月的日期控件,一直没找到。。。。。


6楼
发表于 2015-5-2 06:21:19
本帖最后由 夏娃 于 2015-12-16 14:30 编辑

顶一下哦
我进来全方面的了解学习一下以前的知识点
{:8_198:}


7楼
发表于 2015-9-3 21:30:04
本帖最后由 夏娃 于 2015-12-16 14:30 编辑

非常感谢分享,谢谢!


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

6回帖数 1关注人数 9584浏览人数
最后回复于:2015-9-3 21:30

返回顶部 返回列表