在日历和日期搜索功能中插入值

时间:2014-11-15 16:13:57

标签: javascript html

感谢您查看我的问题。我需要的是一个日历,你可以在某个日期插入一定的价值(如生日,假期,牙医预约等)。我把这个简单的表改成了周末的外观。我以为我使用数组系统来添加值,但我不知道如何将每个日期绑定到一个单独的数组。

它还需要一个搜索功能,您可以使用该功能搜索日期,它将专注于它,我甚至不知道如何开始它。

在启动时,它必须关注当前日期,它需要多个月,但我想我可以完成它。我最大的问题是工作阵列系统(或其他方法)和搜索功能。再次,非常感谢您查看我的问题。

<html>
<head>
<script>

// geef elke cell een igen ID en maak de array uniek aan die cell.
// Makes a function to add birthdays, vacation etc to a date
var cell = [];

function add(){
    var invoer = window.prompt("Voer hier de tekst in die u wenst toe te voegen aan deze datum.             Als u deze datum wil bekijken, voert u 'bekijk' in.");

        if(invoer != "bekijk"){
            cell[cell.length] = invoer
        }

        if(invoer == "bekijk"){
            alert(cell)
        }


}
</script>
</head>
<body>
<table border="2">
<tr>
<th colspan="7">January 2014</th>
</tr>
<tr>
<th>Ma</th>
<th>Di</th>
<th>Wo</th>
<th>Do</th>
<th>Vr</th>
<th bgcolor = cyan>Za</th>
<th bgcolor = cyan>Zo</th>
</tr>
<tr>
<td onclick = add()>1</td>
 <td onclick = add()>2</td>
<td onclick = add()>3</td>
<td onclick = add()>4</td>
<td onclick = add()>5</td>
<td onclick = add() bgcolor = cyan>6</td>
<td onclick = add() bgcolor = cyan>7</td>
</tr>
<tr>
<td onclick = add()>8</td>
<td onclick = add()>9</td>
<td onclick = add()>10</td>
<td onclick = add()>11</td>
<td onclick = add()>12</td>
<td onclick = add() bgcolor = cyan>13</td>
<td onclick = add() bgcolor = cyan>14</td>
</tr>
<tr>
<td onclick = add()>15</td>
<td onclick = add()>16</td>
<td onclick = add()>17</td>
<td onclick = add()>18</td>
<td onclick = add()>19</td>
<td onclick = add() bgcolor = cyan>20</td>
<td onclick = add() bgcolor = cyan>21</td>
</tr>
<tr>
<td onclick = add()>22</td>
<td onclick = add()>23</td>
<td onclick = add()>24</td>
<td onclick = add()>25</td>
<td onclick = add()>26</td>
<td onclick = add() bgcolor = cyan>27</td>  
<td onclick = add() bgcolor = cyan>28</td>
</tr>
<tr>
<td onclick = add()>29</td>
<td onclick = add()>30</td>
<td onclick = add()>31</td>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

使用jQueryUI:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
Date: <div id="datepicker"></div>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    var info = {};
    $( "#datepicker" ).datepicker({ onSelect: function( selectedDate ) {
      var input = prompt('Voer hier de tekst in die u wenst toe te voegen aan deze datum.Als u deze datum wil bekijken, voert u  in.');
      if(!input) {
        info[selectedDate.replace(/[\/]/gi, '')] = input;
      }
    }});
    /*if you want to search a specific position to get information: MMDDYYYY
    console.log(info['11252014']);*/
  });
  </script>
</body>
</html>

运行:
http://jsbin.com/cavirowatu/1/edit?html,js,output