jquery-ui里日期插件的使用

HTML为

        <input type="text" id="starttime" readonly />
        <input type="text" id="endtime" readonly />

设置readonly属性，则输入框不可写；

引入必要的js文件和css文件

        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>

如果要用到中文的，要引入以下js文件

        <script type="text/javascript" src="datepicker_cn.js"></script>

还需在页面加载后初始化该插件

            $(function(){
                /*
                 * 初始化日期插件
                 */
                $('#starttime').datepicker({
                    onSelect : function(dateText, inst) {
                        $("#endtime").datepicker("option", "minDate", dateText);
                    },
                    showButtonPanel : true,
                    inline : true
                });
                
                $('#endtime').datepicker({
                    onSelect : function(dateText, inst) {
                        $("#starttime").datepicker("option", "maxDate", dateText);
                    },
                    showButtonPanel : true,
                    inline : true
                });
            });

若要限制开始时间必须从今天开始，不可选昨天以前的，在上面初始化后可继续追加一句

    //限制开始时间最小为今天
    $('#txtbegintime').datepicker('option', 'minDate', '0');

若只想使用时分秒的时间插件，则需要引入以下js文件和css文件

 　　　　<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
        <script type="text/javascript" src="jquery-ui-timepicker-zh-CN.js"></script> //中文

$(function(){
    $("#starttime").timepicker();
    $(".timeinput").timepicker();
});
　　//初始化

未完，继续添加...