基于JQuery的日历控件

<!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>
    <link href="calendar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="cal.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function () {	
        $('input.one').simpleDatepicker();
        $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });
        $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' });
        $('input.four').simpleDatepicker({ x: 45, y: 3 });
      });
    </script>
  </head>
  <body>
    <p><input class="one" type="text" name="date" value="" />
      <input class="two" type="text" name="date" value="" />
      <input class="three" type="text" name="date" value="" /></p>
    <p><input class="four" type="text" name="date" value="" />
      <input class="four" type="text" name="date" value="" />
      <input class="four" type="text" name="date" value="" /></p>
  </body>
</html>

 

示例图:

基于JQuery的日历控件

 

具体可参考附件。

你可能感兴趣的:(JavaScript,html,jquery,css,XHTML)