За последние 24 часа нас посетили 16804 программиста и 1615 роботов. Сейчас ищет 1271 программист ...

Javascript: календарь как в phpmyadmin

Тема в разделе "JavaScript и AJAX", создана пользователем Andrey K., 2 окт 2008.

  1. Andrey K.

    Andrey K. Активный пользователь

    С нами с:
    22 май 2007
    Сообщения:
    83
    Симпатии:
    0
    Привет.
    Нужно в форме сделать поле, где будет выбираться дата (желательно еще выбор времии) как в phpmyadmin...
    есть там поля для ввода даты, при нажатии на кнопку вылазит окошко с календарем, там выбираешь дату и после нажатия эта дата переноситься в поле...

    пытался выдрать из phpmyadmin`а, но скрипт не желает работать... ошибку никак не могу исправить...

    Подскажите как его выдрать? какие файлы нужны? может кто уже делал это?

    P.S.
    Нашел такой пример:
    Код (Text):
    1. <script>
    2.  
    3. /**
    4.  * Opens calendar window.
    5.  *
    6.  * @param   string      calendar.php parameters
    7.  * @param   string      form name
    8.  * @param   string      field name
    9.  * @param   string      edit type - date/timestamp
    10.  */
    11. function openCalendar(params, form, field, type) {
    12.  
    13.     window.open("calendar.php", "calendar", "width=400,height=300,status=yes");
    14.     dateField = eval("document." + form + "." + field);
    15.     dateType = type;
    16. }
    17.  
    18. </script>
    19. <input size="50" name="date" value="">
    20. <script type="text/javascript" language="javascript">
    21. document.write('<a title="Calendar" href="javascript:openCalendar(\'\', \'adminForm\', \'date\', \'datetime\')">Calendar</a>');
    22. </script>
    calendar.php
    Код (Text):
    1. <html>
    2. <head>
    3.  
    4. <style>
    5. /* Calendar */
    6. table.calendar      { width: 100%; }
    7. table.calendar td   { text-align: center; }
    8. table.calendar td a { display: block; }
    9.  
    10. table.calendar td a:hover {
    11.     background-color: #7fcaff;
    12. }
    13.  
    14. table.calendar th {
    15.     background-color: #daf0ff;
    16. }
    17.  
    18. table.calendar td.selected {
    19.     background-color:  #bfd9eb;
    20. }
    21.  
    22. img.calendar { border: none; }
    23. form.clock   { text-align: center; }
    24. /* end Calendar */
    25. </style>
    26.  
    27. <script>
    28.  
    29.  
    30.     var day;
    31.     var month;
    32.     var year;
    33.     var hour;
    34.     var minute;
    35.     var second;
    36.  
    37. /**
    38.  * Formats number to two digits.
    39.  *
    40.  * @param   int number to format.
    41.  * @param   string type of number
    42.  */
    43. function formatNum2(i, valtype) {
    44.     f = (i < 10 ? '0' : '') + i;
    45.     if (valtype && valtype != '') {
    46.         switch(valtype) {
    47.             case 'month':
    48.                 f = (f > 12 ? 12 : f);
    49.                 break;
    50.  
    51.             case 'day':
    52.                 f = (f > 31 ? 31 : f);
    53.                 break;
    54.  
    55.             case 'hour':
    56.                 f = (f > 24 ? 24 : f);
    57.                 break;
    58.  
    59.             default:
    60.             case 'second':
    61.             case 'minute':
    62.                 f = (f > 59 ? 59 : f);
    63.                 break;
    64.         }
    65.     }
    66.  
    67.     return f;
    68. }
    69.  
    70. /**
    71.  * Formats number to two digits.
    72.  *
    73.  * @param   int number to format.
    74.  * @param   int default value
    75.  * @param   string type of number
    76.  */
    77. function formatNum2d(i, default_v, valtype) {
    78.     i = parseInt(i, 10);
    79.     if (isNaN(i)) return default_v;
    80.     return formatNum2(i, valtype)
    81. }
    82.  
    83. /**
    84.  * Formats number to four digits.
    85.  *
    86.  * @param   int number to format.
    87.  */
    88. function formatNum4(i) {
    89.     i = parseInt(i, 10)
    90.     return (i < 1000 ? i < 100 ? i < 10 ? '000' : '00' : '0' : '') + i;
    91. }
    92.  
    93.  
    94. /**
    95.  * Initializes calendar window.
    96.  */
    97. function initCalendar() {
    98.  
    99.     var month_names;
    100.     var day_names = new Array();
    101.     day_names[0] = "Sun";  
    102.     day_names[1] = "Mon";
    103.     day_names[2] = "Tue";  
    104.     day_names[3] = "Wed";  
    105.     day_names[4] = "Thu";  
    106.     day_names[5] = "Fri";  
    107.     day_names[6] = "Sat";  
    108.  
    109.     var clock_set = 0;
    110.  
    111.     if (!year && !month && !day)
    112.     {
    113.         if(window.opener.dateField.value)
    114.         {
    115.             value = window.opener.dateField.value;
    116.             if (window.opener.dateType == 'datetime' || window.opener.dateType == 'date')
    117.             {
    118.                 if (window.opener.dateType == 'datetime')
    119.                 {
    120.                     parts   = value.split(' ');
    121.                     value   = parts[0];
    122.  
    123.                     if (parts[1])
    124.                     {
    125.                         time    = parts[1].split(':');
    126.                         hour    = parseInt(time[0],10);
    127.                         minute  = parseInt(time[1],10);
    128.                         second  = parseInt(time[2],10);
    129.                     }
    130.                 }
    131.                
    132.                 date        = value.split("-");
    133.                 day         = parseInt(date[2],10);
    134.                 month       = parseInt(date[1],10) - 1;
    135.                 year        = parseInt(date[0],10);
    136.  
    137.             }
    138.             else
    139.             {
    140.                 year        = parseInt(value.substr(0,4),10);
    141.                 month       = parseInt(value.substr(4,2),10) - 1;
    142.                 day         = parseInt(value.substr(6,2),10);
    143.                 hour        = parseInt(value.substr(8,2),10);
    144.                 minute      = parseInt(value.substr(10,2),10);
    145.                 second      = parseInt(value.substr(12,2),10);
    146.             }
    147.         }
    148.         if (isNaN(year) || isNaN(month) || isNaN(day) || day == 0) {
    149.             dt      = new Date();
    150.             year    = dt.getFullYear();
    151.             month   = dt.getMonth();
    152.             day     = dt.getDate();
    153.         }
    154.         if (isNaN(hour) || isNaN(minute) || isNaN(second)) {
    155.             dt      = new Date();
    156.             hour    = dt.getHours();
    157.             minute  = dt.getMinutes();
    158.             second  = dt.getSeconds();
    159.         }
    160.     }
    161.     else
    162.     {          
    163.         if (month > 11)
    164.         {
    165.             month = 0;
    166.             year++;
    167.         }
    168.         if (month < 0)
    169.         {
    170.             month = 11;
    171.             year--;
    172.         }
    173.     }
    174.          
    175.     if (document.getElementById) {
    176.         cnt = document.getElementById("calendar_data");
    177.     } else if (document.all) {
    178.         cnt = document.all["calendar_data"];
    179.     }
    180.    
    181.  
    182.     cnt.innerHTML = "";
    183.  
    184.     str = "";    
    185.  
    186.     //heading table
    187.     str += '<table class="calendar" border="0"><tr><th width="50%">';
    188.     str += '<form method="NONE" onsubmit="return 0">';
    189.     str += '<a href="javascript:month--; initCalendar();">«</a> ';
    190.     str += '<select id="select_month" name="monthsel" onchange="month = parseInt(document.getElementById(\'select_month\').value); initCalendar();">';
    191.  
    192.     for (i =0; i < 12; i++)
    193.     {
    194.         if (i == month)
    195.            selected = ' selected="selected"';
    196.         else
    197.            selected = '';
    198.         j = i + 1;  
    199.         str += '<option value="' + i + '" ' + selected + '>' + j + '</option>';
    200.     }
    201.     str += '</select>';
    202.     str += ' <a href="javascript:month++; initCalendar();">»</a>';
    203.     str += '</form>';
    204.     str += '</th><th width="50%">';
    205.     str += '<form method="NONE" onsubmit="return 0">';
    206.     str += '<a href="javascript:year--; initCalendar();">«</a> ';
    207.     str += '<select id="select_year" name="yearsel" onchange="year = parseInt(document.getElementById(\'select_year\').value); initCalendar();">';
    208.     for (i = year - 25; i < year + 25; i++) {
    209.         if (i == year) selected = ' selected="selected"';
    210.         else selected = '';
    211.         str += '<option value="' + i + '" ' + selected + '>' + i + '</option>';
    212.     }  
    213.     str += '</select>';
    214.     str += ' <a href="javascript:year++; initCalendar();">»</a>';
    215.     str += '</form>';
    216.     str += '</th></tr></table>';
    217.    
    218.     str += '<table class="calendar"><tr>';
    219.     for (i = 0; i < 7; i++) {
    220.         str += "<th>" + day_names[i] + "</th>";
    221.     }
    222.     str += "</tr>";
    223.  
    224.     var firstDay = new Date(year, month, 1).getDay();
    225.     var lastDay = new Date(year, month + 1, 0).getDate();
    226.  
    227.     str += "<tr>";
    228.  
    229.     dayInWeek = 0;
    230.     for (i = 0; i < firstDay; i++) {
    231.         str += "<td> </td>";
    232.         dayInWeek++;
    233.     }
    234.     for (i = 1; i <= lastDay; i++) {
    235.         if (dayInWeek == 7) {
    236.             str += "</tr><tr>";
    237.             dayInWeek = 0;
    238.         }
    239.  
    240.         dispmonth = 1 + month;
    241.  
    242.         if (window.opener.dateType == 'datetime' || window.opener.dateType == 'date') {
    243.             actVal = "" + formatNum4(year) + "-" + formatNum2(dispmonth, 'month') + "-" + formatNum2(i, 'day');
    244.         } else {
    245.             actVal = "" + formatNum4(year) + formatNum2(dispmonth, 'month') + formatNum2(i, 'day');
    246.         }
    247.         if (i == day) {
    248.             style = ' class="selected"';
    249.             current_date = actVal;
    250.         } else {
    251.             style = '';
    252.         }
    253.         str += "<td" + style + "><a href=\"javascript:returnDate('" + actVal + "');\">" + i + "</a></td>"
    254.         dayInWeek++;
    255.     }
    256.     for (i = dayInWeek; i < 7; i++) {
    257.         str += "<td> </td>";
    258.     }
    259.  
    260.     str += "</tr></table>";
    261.  
    262.     cnt.innerHTML = str;
    263.  
    264.     // Should we handle time also?
    265.     if (window.opener.dateType != 'date' && !clock_set) {
    266.  
    267.         if (document.getElementById) {
    268.             cnt = document.getElementById("clock_data");
    269.         } else if (document.all) {
    270.             cnt = document.all["clock_data"];
    271.         }
    272. var submit_text;
    273.         str = '';
    274.         init_hour = hour;
    275.         init_minute = minute;
    276.         init_second = second;
    277.         str += '<form method="NONE" class="clock" onsubmit="returnDate(\'' + current_date + '\')">';
    278.         str += '<input id="hour"    type="text" size="2" maxlength="2" onblur="this.value=formatNum2d(this.value, init_hour, \'hour\'); init_hour = this.value;" value="' + formatNum2(hour, 'hour') + '" />:';
    279.         str += '<input id="minute"  type="text" size="2" maxlength="2" onblur="this.value=formatNum2d(this.value, init_minute, \'minute\'); init_minute = this.value;" value="' + formatNum2(minute, 'minute') + '" />:';
    280.         str += '<input id="second"  type="text" size="2" maxlength="2" onblur="this.value=formatNum2d(this.value, init_second, \'second\'); init_second = this.value;" value="' + formatNum2(second, 'second') + '" />';
    281.         str += '<br /><br />';
    282.         str += '<input type="submit" value="Set"/>';
    283.         str += '</form>';
    284.  
    285.         cnt.innerHTML = str;
    286.         clock_set = 1;
    287.     }
    288.  
    289. }
    290.  
    291. /**
    292.  * Returns date from calendar.
    293.  *
    294.  * @param   string     date text
    295.  */
    296. function returnDate(d) {
    297.     txt = d;
    298.     if (window.opener.dateType != 'date') {
    299.         // need to get time
    300.         h = parseInt(document.getElementById('hour').value,10);
    301.         m = parseInt(document.getElementById('minute').value,10);
    302.         s = parseInt(document.getElementById('second').value,10);
    303.         if (window.opener.dateType == 'datetime') {
    304.             txt += ' ' + formatNum2(h, 'hour') + ':' + formatNum2(m, 'minute') + ':' + formatNum2(s, 'second');
    305.         } else {
    306.             // timestamp
    307.             txt += formatNum2(h, 'hour') + formatNum2(m, 'minute') + formatNum2(s, 'second');
    308.         }
    309.     }
    310.  
    311.     window.opener.dateField.value = txt;
    312.     window.close();
    313. }
    314.  
    315.  
    316.  
    317. </script>
    318. </head>
    319.  
    320. <body onload="initCalendar();">
    321. <div id="calendar_data"></div>
    322. <div id="clock_data"></div>
    323.  
    324. </body>
    325. </html>
    Но выдает ошибку:
    - это тут (... if(window.opener.dateField.value) ...)
    Код (Text):
    1. Ошибка: "window.opener.dateField.value" - есть null или не является объектом
     
  2. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
  3. Andrey K.

    Andrey K. Активный пользователь

    С нами с:
    22 май 2007
    Сообщения:
    83
    Симпатии:
    0
    а как там javascript выдрать? до меня не дошло...
     
  4. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
  5. Andrey K.

    Andrey K. Активный пользователь

    С нами с:
    22 май 2007
    Сообщения:
    83
    Симпатии:
    0
    Спасибо!!!