initial commit

jun68ykt · Jul 27, 2019 · 5d997c3 · 5d997c3
commit 5d997c3
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Q202886</title>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <link type="text/css" rel="stylesheet"
+          href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" />
+    <script src="main.js"></script>
+</head>
+<body>
+<div id="container">
+    <div class="wrapper">
+        <input type="text" name="開始日" class="datepicker" id="start_date" placeholder="開始日">　～　
+        <input type="text" name="終了日" class="datepicker" id="end_date" placeholder="終了日"><br>
+        日時 <input id="diff_day">日
+        <div class="output">
+          <!-- ここに開始日から終了日までの日付を出力したい -->
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,40 @@
+$(function() {
+  // 日本語化
+  $.datepicker.setDefaults({
+    closeText: "閉じる",
+    prevText: "<前",
+    nextText: "次>",
+    currentText: "今日",
+    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+    monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+    dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
+    dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
+    dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
+    weekHeader: "週",
+    firstDay: 0,
+    isRTL: false,
+    showMonthAfterYear: true,
+    yearSuffix: "年",
+    dateFormat: 'yy/mm/dd（D）',
+    numberOfMonths: 1,
+  });
+
+  $('#start_date').datepicker({
+    minDate: 0,
+    onSelect: showDays
+  });
+
+  $('#end_date').datepicker({
+    minDate: 0,
+    onSelect: showDays
+  });
+
+  function showDays() {
+    var start = $('#start_date').datepicker('getDate');
+    var end = $('#end_date').datepicker('getDate');
+    if (!start || !end) return;
+    var days = (end - start) / 1000 / 60 / 60 / 24;
+    days++;
+    $('#diff_day').val(days); //開始日～終了日までの日数
+  }
+});