Question

我在点击选择日期链接时使用以下代码显示日历。

// JavaScript Document
//script for date picker

// You can edit this function if you need the date in a different format
function format_date_field(y, m, d) {
   return '' + y + '-' + 
          ((m > 9) ? m : '0' + m) + '-' +
          ((d > 9) ? d : '0' + d);
}



m_list = Array("January", "February", "March",
               "April",   "May",      "June",
               "July",    "August",   "September",
               "October", "November", "December");    
//target = '';
targets = Array();

function set_date_field(y, m, d, t_idx) {
   eval(targets[t_idx] + ' = unescape(\'' + escape(format_date_field(y, m, d)) + '\')' );
}

function show_cal(target_a) {
   var d = new Date();
   show_cal_m(d.getFullYear(), d.getMonth(), target_a);
}

function show_cal_m(y,m, target_a) {
   t_idx = targets.push(target_a) - 1;
   write_cal_pop(y,m, open('about:blank','cal_win'+t_idx,'width=175,height=150'), t_idx);
}

function write_cal_pop(y,m, cal_win, t_idx) {
   cal_win.document.open();
   cal_win.document.writeln('<html><head><title>Date Picker</title>');
   cal_win.document.writeln('<style type="text/css">');
   cal_win.document.writeln('td {');
   cal_win.document.writeln('   font-family: Verdana, Arial, Helvetica, sans-serif;');
   cal_win.document.writeln('   font-size: 9pt;');
   cal_win.document.writeln('   color: #000000;');
   cal_win.document.writeln('   background-color: #CCCCCC;');
   cal_win.document.writeln('   text-align: center;');
   cal_win.document.writeln('}');
   cal_win.document.writeln('th {');
   cal_win.document.writeln('   font-family: Verdana, Arial, Helvetica, sans-serif;');
   cal_win.document.writeln('   font-size: 9pt;');
   cal_win.document.writeln('   color: #000000;');
   cal_win.document.writeln('   background-color: #CC0000;');
   cal_win.document.writeln('   text-align: center;');
   cal_win.document.writeln('}');
   cal_win.document.writeln('a {');
   cal_win.document.writeln('   color: #000000;');
   cal_win.document.writeln('   text-decoration: none;');
   cal_win.document.writeln('}');
   cal_win.document.writeln('</style></head><body leftmargin=2 topmargin=2 marginwidth=2 marginheight=2>');


   var one_day     = 1000 * 60 * 60 * 24;
   //var next_month  = (m==11) ? 0 : m + 1;

   d = new Date(y,m,1, 0,0,0,0);
   d = new Date(d.valueOf() - (one_day * 6));

   while (d.getDay() != 1) {
      d = new Date(d.valueOf() + one_day);
   }

   cal_win.document.writeln('<table align="center" width="100%" height="100%">');
   cal_win.document.writeln('<tr>'); 

   //PREV
   cal_win.document.write('<th><a href="javascript: opener.write_cal_pop(');
   if (m==0) {  cal_win.document.write((y-1) + ', 11'); } 
   else      {  cal_win.document.write(y + ', ' + (m-1)); }
   cal_win.document.writeln(', self, ' + t_idx + ');">&lt;</a></td>');

   //CUR.
   cal_win.document.writeln('<th colspan=5><b>' + m_list[m] + ' ' + y + '</b></td>');

   //NEXT
   cal_win.document.write('<th><a href="javascript: opener.write_cal_pop(');
   if (m==11) {  cal_win.document.write((y+1) + ', 0');    } 
   else       {  cal_win.document.write(y + ', ' + (m+1)); }
   cal_win.document.writeln(', self, ' + t_idx + ');">&gt;</a></td>');

   cal_win.document.writeln('</tr>'); 

   //day of week header
   cal_win.document.writeln('<tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>');

   //DAYS
   day_count = 0;
   while (day_count < 42) {
      day_count++

      if (d.getDay() == 1) { cal_win.document.writeln('<tr>'); }
      cal_win.document.writeln('<td>' + (d.getMonth()==m ? '<b>' : ''));
      cal_win.document.writeln('<a href="javascript: opener.set_date_field(' +
              d.getFullYear() + ', ' + (d.getMonth()+1) + ', ' + d.getDate() + 
              ', ' + t_idx + '); self.close();">' +  d.getDate() + '</a>');

      cal_win.document.writeln(d.getMonth()==m ? '</b></td>' : '</td>');
      //next
      //d = new Date(d.valueOf() + one_day); //replaced to stop double day in oct error
      d.setDate(d.getDate() + 1);
      //if (d.getMonth() == next_month && d.getDay() == 1) {  break;  }
   }


   cal_win.document.writeln('</table>');
   cal_win.document.writeln('</body></html>');
   cal_win.document.close();
}

在我的php页面中，我使用了以下代码。

<td><input type="text" name="joining" id="joining"/>
                  <a href="javascript: show_cal('document.admission_form.joining.value')">pick date</a></td>
            </tr>

如果我点击选择日期链接日历将在新窗口中打开。我需要在同一页面的输入字段附近打开日历。我怎么能这样做？

Answer 1

替换

<td><input type="text" name="joining" id="joining"/>
              <a href="javascript: show_cal('document.admission_form.joining.value')">pick date</a></td>
        </tr>

用

<td><input type="text" name="joining" id="joining"/>
              <a href="#" onclick="show_cal('document.admission_form.joining.value')">pick date</a></td>
        </tr>

基本上，第一个更改是href标记，其值已更改为“＃”以声明它是页面的锚点（请参阅href锚点），因为它未进行，因此是冗余链接。第二个更改是将日历显示功能移动到事件监听器。

Answer 2

此行导致页面在新窗口中打开

write_cal_pop(y,m, open('about:blank','cal_win'+t_idx,'width=175,height=150'), t_idx);

您正在调用open（）命令，该命令将打开一个新窗口，或者如果已存在具有该名称的窗口，则覆盖它的内容。您需要将内容写入当前DOM中的DOM元素（这可能是您在页面中指定用于显示日历的div。）

Answer 3

非常快且粗略修复javascript（最好使用jQuery + DatePicker，例如，http://jqueryui.com/demos/datepicker/）如图所示修改函数“show_cal”，“show_cal_m”和“set_date_field”并添加其他函数：

function set_date_field(y, m, d, t_idx) {
    targets[t_idx].value = format_date_field(y, m, d);
}

function show_cal(obj, target_a) {
   var d = new Date();
   show_cal_m(obj, d.getFullYear(), d.getMonth(), target_a);
}

function show_cal_m(obj, y,m, target_a) {
   t_idx = targets.push(target_a) - 1;
   var ifr = document.createElement('iframe');
   ifr.style.width = '175px';
   ifr.style.height = '150px';
   ifr.style.position = 'absolute';
   var pos = findPos(obj);
   ifr.style.top = pos[1];
   ifr.style.left = pos[0];
   ifr.id = 'calendar';
   document.body.appendChild(ifr);
   ifr = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
   write_cal_pop(y,m, ifr, t_idx);
}

function closeCalendar() {
   document.body.removeChild(document.getElementById('calendar'));    
}

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}

修改代码：

cal_win.document.writeln('<a href="javascript: parent.set_date_field(' +
              d.getFullYear() + ', ' + (d.getMonth()+1) + ', ' + d.getDate() + 
              ', ' + t_idx + '); parent.closeCalendar();">' +  d.getDate() + '</a>');

拨打电话

<a href='#' onclick="show_cal(this, document.admission_form.joining); return false;">pick date</a>

javascript日历中的错误

3 个答案: