日期:2014-05-16  浏览次数:20384 次

JSCal2 日历控件用法
JSCal2有多种界面,功能很丰富.最新版本1.8
官方网站: http://www.dynarch.com/static/JSCal2/index.html
官方文档: http://www.dynarch.com/projects/calendar/doc/
简单使用,如下:
引入相关文件
   <script type="text/javascript" src="/jscal2/js/jscal2.js"></script>
   <script type="text/javascript" src="/jscal2/js/lang/cn.js"></script>
   <link rel="stylesheet" type="text/css" href="/jscal2/css/jscal2.css">
   <link rel="stylesheet" type="text/css" href="/jscal2/css/border-radius.css">
   <link rel="stylesheet" type="text/css" href="/jscal2/css/steel/steel.css">


安装日历控件
  
  <s:textfield id="f_end_date" name="endRange" readonly="true" theme="xhtml"/>
                    <button id="f_start_btn2" onclick="return false;">...</button>
                    <script type="text/javascript">
                        var cal = Calendar.setup({
                            onSelect:function(cal) {
                                cal.hide()
                            },
                            showTime: false
                        });
                        cal.manageFields("f_start_btn1", "f_start_date", "%Y-%m-%d");
                        cal.manageFields("f_start_btn2", "f_end_date", "%Y-%m-%d");
                    </script>