{% extends "jinhtml/skel.html" %}
{% block headcss %}
  <style type="text/css">
    div#timeselect{
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: x-large;
      text-align: center;
    }
    div#timeselect input{
      vertical-align: text-top;
    }
    table#cal{
      min-width: 800px;
      width: 100%;
    }
    tbody#calbody td{
      border-width: 1px;
      border-style: solid;
      vertical-align: top;
      height: 100px;
      width: 14.285%;
    }
    #timeselect_year, #timeselect_month{
      font-family: serif;
    }
    #timeedit_month, #timeedit_year, #timeedit_apply, #timeedit_cancel{
      display: none;
    }
    #timeedit_month, #timeedit_year{
      width: 50px;
    }
  </style>
{% endblock %}

{% block onload %}
  setyearmonth();
  setmonthcal();
  var switchmonthobj = document.getElementById("switchmonth");
  switchmonthobj.className += "selected";
  switchmonthobj.onclick = "";
  status_bar_append("(y)修改年份 (m)修改月份");
{% endblock %} 
  
{% block headjs %}
  <script src="js/month.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).bind("keydown", "m", timeedit_month_kbd);
    $(document).bind("keydown", "y", timeedit_year_kbd);
  </script>
{% endblock %}

{% block body %}
  <div id="timeselect">
    <input type="button" value="<" id="timeselect_prev" onclick="timeselect_prev()">
    <span id="timeselect_year" onclick="timeselect_direct()">XXXX</span>
    <input type="text" maxlength="4" id="timeedit_year">
    年
    <span id="timeselect_month" onclick="timeselect_direct()">XX</span>
    <input type="text" maxlength="2" id="timeedit_month">
    月 
    <input type="button" value=">" id="timeselect_fwd" onclick="timeselect_fwd()">
    <input type="button" value="改" id="timeedit_button" onclick="timeselect_direct()">
    <input type="button" value="確定" id="timeedit_apply" onclick="timeedit_apply()">
    <input type="button" value="取消" id="timeedit_cancel" onclick="timeedit_cancel()">
  </div>
  <div id="monthcal">
    <table id="cal">
      <thead>
        <tr>
          <td>週日</td>
          <td>週一</td>
          <td>週二</td>
          <td>週三</td>
          <td>週四</td>
          <td>週五</td>
          <td>週六</td>
        </tr>
      </thead>
      <tbody id="calbody">
      </tbody>
    </table>
  </div>
{% endblock %}