「jqueryでn日後の取得」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryでn日後の取得

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jqueryでn日後の取得</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript" src="jquery.common.js"></script>
  10. <script type="text/javascript">
  11.   var viewModel = function () {
  12.     var self = this;
  13.     
  14.     self.today = ko.observable();
  15.     self.today_load = function() {
  16.       self.masterAddUnit = ko.observable(new Array({name: "年後", value: "y"}, {name: "ヶ月後", value: "m"}, {name: "日後", value: "d"}));
  17.       
  18.       var setDay = ({
  19.         now: $.getToday(),
  20.         addNum: 0,
  21.         selectAddUnit: ko.observable(self.masterAddUnit()[2]),
  22.         resultDate: ko.observable("")
  23.       });
  24.       
  25.       self.today(setDay);
  26.       self.calculation(setDay);
  27.     }
  28.     
  29.     self.calculation = function(obj, data) {
  30.       var result = $.getToday(self.today().addNum, self.today().selectAddUnit().value);
  31.       self.today().resultDate(result);
  32.     }
  33.     
  34.     self.initialize = function () {
  35.       self.today_load();
  36.     };
  38.     self.initialize();
  39.     
  40.   };
  41.   
  42.   $(document).ready(function () {
  43.     ko.applyBindings(new viewModel());
  44.   });
  45. </script>
  47. </head>
  48. <body>
  50. <h1>jqueryでn日後の取得</h1>
  52. <div>
  53.   <form data-bind="with: today, submit: $root.calculation">
  54.     <span data-bind="text: now"></span>の
  55.     <input type="text" data-bind="value: addNum" style="width: 3em" />
  56.     <select data-bind="options: $root.masterAddUnit, optionsText: 'name', value: selectAddUnit"></select>は
  57.     <span data-bind="text: resultDate"></span>。
  58.     <br /><br />
  59.     <input type="submit" value="計算" data-bind="click: $root.calculation" />
  60.   </form>
  61. </div>
  64. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  65. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  66. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  67. </div>
  69. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  70. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  71. </div>
  73. </body>
  74. </html>