jQuery日期插件

1.下载jQuery日期插件，见附件。

2.导入相应的js文件和jquery源码。例如

    <link rel="stylesheet" type="text/css" href="css/datePicker.css">
    <script type="text/javascript" src="js/jquery-1.2.5.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
    <script type="text/javascript" src="js/jquery.datePicker.js"></script>

3.制作1个from表单。

            <form name="chooseDateForm" id="chooseDateForm" action="servlet/DateServlet" method="post">
                 <fieldset>
                 开始时间：<input name="startDate" id="startDate" class="date-pick" /><br>
                 结束时间：<input name="endDate" id="endDate" class="date-pick" /><br>
                 <label for="test-select">Test select:</label>
                             <select name="test-select" id="test-select" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                 <input type="submit" value="提交" />
                 </fieldset>
            </form>

4.当页面加载完成后执行输入框的替换。例如：

    <script type="text/javascript">
        $(function(){
            $('.date-pick').datePicker({startDate:'01/01/1996'});
        });
    </script>

    $('.date-pick')表示选择所有class属性为date-pick的元素，也就是引用的css,在这里是                

开始时间：<input name="startDate" id="startDate" class="date-pick" /><br>
结束时间：<input name="endDate" id="endDate" class="date-pick" /><br>

 

 

5.为了验证除日期输入框之外其他表单子元素是否能接受，特别加了以一个下拉列表。现在就可以在服务器端验证是否能收    到数据。例如在servlet中的doPost方法中可以这样写：

        String startDate = request.getParameter("startDate");
        String endDate = request.getParameter("endDate");
        String selectValue = request.getParameter("test-select");

        String[] dateArray = new String[3];
        dateArray = startDate.split("/");
        Calendar ca = null;
        try{
            int day = Integer.parseInt(dateArray[0]);
            int month = Integer.parseInt(dateArray[1]);
            int year = Integer.parseInt(dateArray[2]);
            ca = new GregorianCalendar(year,month,day);
        }
        catch (NumberFormatException e) {
            System.out.println("日期转换错误");
            e.printStackTrace();
        }
       
        System.out.println(("YEAR: " + ca.get(Calendar.YEAR)));
        System.out.println(("MONTH: " + ca.get(Calendar.MONTH)));
        System.out.println(("DAY: " + ca.get(Calendar.DAY_OF_MONTH)));

 

评论

3 楼 tamsiuloong 2009-11-24  

tosunrains 写道

    使用jquery以后竟然还需要这么多的代码……

2楼，有更好的就放心说出来赛，代码还要怎么少？？

2 楼 tosunrains 2009-01-17  

    使用jquery以后竟然还需要这么多的代码……

1 楼 qqjanye 2008-11-18  

感觉不是很理想啊...