当前位置: 代码迷 >> Web前端 >> datepick 与此同时 显示 两个 日历控件
  详细解决方案

datepick 与此同时 显示 两个 日历控件

热度:768   发布时间:2012-09-10 22:20:13.0
datepick 同时 显示 两个 日历控件

<html>
<head>
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css" />
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <style>
        .ui-datepicker .ui-datepicker-title select
        {
            font-size: 1em;
            margin: 1px 0;
        }
        .ui-datepickerselect.ui-datepicker-month-year
        {
            width: 100%;
        }
        .ui-datepickerselect.ui-datepicker-month, .ui-datepickerselect.ui-datepicker-year
        {
            width: 40%;
        }
        .ui-datepicker .ui-datepicker-title select.ui-datepicker-year
        {
            float: left;
        }
        .ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div
        {
            font-size: 0.7em;
        }
    </style>
    <script>
        $(function () {
            $.datepicker.regional['zh-CN'] = {
                closeText: '关闭',
                prevText: '&#x3c;上月',
                nextText: '下月&#x3e;',
                currentText: '今天',
                monthNames: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                monthNamesShort: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                dateFormat: 'yy-mm-dd', firstDay: 1,
                isRTL: false
            };
            $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
         
          $( "#datepicker1" ).datepicker();

            $( "#datepicker2" ).datepicker();
            //$('#datepicker').datepicker('option', { dateFormat: "yy-mm-dd" });
        });
 </script>
</head>
<body>
 <input type="text" id="datepicker1"  />
    <input type="text" id="datepicker2"   />
</body>
</html>