We Blog Weblog

日付入り一包化

ブログ

2024年7月20日

一包化に日付を入れた場合、何月何日から何月何日になるのかを計算するツールを作ってみました。

例えば昼食後から始まって朝食後で終わる場合、日付はどうなっちゃうの？という場面で役に立つでしょうか。分包機の操作パネルにその機能ついてますけどね

開始日：
日数： 日分
朝 昼 夕 眠前 ～ 朝 昼 夕 眠前

 

服用時点：
開始時点：

結果表示後に「開始日」「日数」「服用時点」を変更した場合は必ずもう一度「計算！」ボタンを押してください。

「服用時点」を変更すると「開始時点」の選択状態が解除されますので再度選択してください。

日付入力欄、日数入力欄、計算ボタン、結果出力欄を用意します。

結果出力欄には開始日、終了日出力欄と、それぞれの用法を設置します。

<form onsubmit="return false">
  開始日：<input type="date" id="startDate">

  日数：<input type="number" id="days" min="1" value="14">日分

  <input type="submit" id="calculate" value="計算！">

  <div id="result">
    <span id="result1"></span>
    <span id="start_m">朝</span>
    <span id="start_t">昼</span>
    <span id="start_a">夕</span>
    <span id="start_v">眠前</span>
    ～ 
    <span id="result2"></span>
    <span id="end_m">朝</span>
    <span id="end_t">昼</span>
    <span id="end_a">夕</span>
    <span id="end_v">眠前</span>
  </div>
</form>

医療業界では朝 昼 夕 眠前のことをM T A Vdsと略するみたいなので、今回のツールではIDにm t a vの文字を使っていこうと思います。

M：morgen（ドイツ語で朝）
T：tag（ドイツ語で日）
A：abend（ドイツ語で夕）
Vds：vor dem schlafen（ドイツ語で寝る前）
の略でしょう多分。

用法の部分は非表示にしておきます。

#start_m, #start_t, #start_a, #start_v, #end_m, #end_t, #end_a, #end_v {
  display: none;
}

まず日付部分のスクリプトを書きます。

#startDateの初期値を今日の日付にします。

計算ボタンを押すと開始日 + 日数 - 1で計算して#result2に出力させるようにします。

#result1には開始日を出力させます。

window.onload = function() {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var toTwoDigits = function(num, digit) {
    num += ''
    if (num.length < digit) {
      num = '0' + num
    }
    return num
  }

  var yyyy = toTwoDigits(year, 4)
  var mm = toTwoDigits(month, 2)
  var dd = toTwoDigits(day, 2)
  var ymd = yyyy + "-" + mm + "-" + dd;

  document.getElementById("startDate").value = ymd;
}

document.getElementById("calculate").onclick = function() {
  var dts = new Date($('#startDate').val());
  var dte = new Date($('#startDate').val());
            
  dts.setDate(dts.getDate());
  var dayOfWeekStrJPs = ["日", "月", "火", "水", "木", "金", "土", ]
  dte.setDate(dte.getDate() + +$('#days').val()-1);
  var dayOfWeekStrJPe = ["日", "月", "火", "水", "木", "金", "土", ]

  var dateOfStart = `
  ${(dts.getMonth()+1).toString().padStart(2, '0')}/
  ${dts.getDate().toString().padStart(2, '0')}
  ${dayOfWeekStrJPs[dts.getDay()]}
  `.replace(/\n|\r/g, '');

  var dateOfEnd = `
  ${(dte.getMonth()+1).toString().padStart(2, '0')}/
  ${dte.getDate().toString().padStart(2, '0')}
  ${dayOfWeekStrJPe[dte.getDay()]}
  `.replace(/\n|\r/g, '');

  $('#result1').text(dateOfStart);
  $('#result2').text(dateOfEnd);
};

年は出力させないようにしました。不要なら曜日も消してもいいかもです。

さて、これからがほんとうの地獄本番です。

服用時点を決める4つのチェックボックスを設置します。

それと、最終的には見えなくしてありますが、チェックボックスの合計値出力欄も設置します。

服用時点：
<input type="checkbox" name="timing" onclick="keisan()" id="cb_m">朝
<input type="checkbox" name="timing" onclick="keisan()" id="cb_t">昼
<input type="checkbox" name="timing" onclick="keisan()" id="cb_a">夕
<input type="checkbox" name="timing" onclick="keisan()" id="cb_v">眠前

<input type="text" name="total" value="0" class="d-none">

次に、開始時点を決めるラジオボタンを設置します。

最初は、チェックボックスの選択状況によって、対応するラジオボタンを有効化していけばいいかなと思っていたのですが、そう単純なものではなくて、例えば「朝昼夕」における「昼」と、「昼夕眠前」における「昼」では意味が変わってきます。

「昼夕眠前」で「昼開始」の場合は計算式はそのままでいいのですが「朝昼夕」で「昼開始」の場合は終了日にさらに+1する必要があります。

面倒ですがすべての組み合わせ（朝昼夕眠前、朝昼夕、朝昼眠前、朝夕眠前、昼夕眠前、朝昼、朝夕、朝眠前、昼夕、昼眠前、夕眠前、朝、昼、夕、眠前、初期状態の計16通り）のグループを設置することにします。

ただしすべてのラジオボタンでnameは共通のものにしておきます。

開始時点：
<div id="default">
  <input type="radio" name="start" id="default_m" disabled>朝
  <input type="radio" name="start" id="default_t" disabled>昼
  <input type="radio" name="start" id="default_a" disabled>夕
  <input type="radio" name="start" id="default_v" disabled>眠前
</div>

<div class="d-none" id="mtav">
  <input type="radio" name="start" id="mtav_m">朝
  <input type="radio" name="start" id="mtav_t">昼
  <input type="radio" name="start" id="mtav_a">夕
  <input type="radio" name="start" id="mtav_v">眠前
</div>

<div class="d-none" id="mta">
  <input type="radio" name="start" id="mta_m">朝
  <input type="radio" name="start" id="mta_t">昼
  <input type="radio" name="start" id="mta_a">夕
</div>

<div class="d-none" id="mtv">
  <input type="radio" name="start" id="mtv_m">朝
  <input type="radio" name="start" id="mtv_t">昼
  <input type="radio" name="start" id="mtv_v">眠前
</div>

<div class="d-none" id="mav">
  <input type="radio" name="start" id="mav_m">朝
  <input type="radio" name="start" id="mav_a">夕
  <input type="radio" name="start" id="mav_v">眠前
</div>

<div class="d-none" id="tav">
  <input type="radio" name="start" id="tav_t">昼
  <input type="radio" name="start" id="tav_a">夕
  <input type="radio" name="start" id="tav_v">眠前
</div>

<div class="d-none" id="mt">
  <input type="radio" name="start" id="mt_m">朝
  <input type="radio" name="start" id="mt_t">昼
</div>

<div class="d-none" id="ma">
  <input type="radio" name="start" id="ma_m">朝
  <input type="radio" name="start" id="ma_a">夕
</div>

<div class="d-none" id="mv">
  <input type="radio" name="start" id="mv_m">朝
  <input type="radio" name="start" id="mv_v">眠前
</div>

<div class="d-none" id="ta">
  <input type="radio" name="start" id="ta_t">昼
  <input type="radio" name="start" id="ta_a">夕
</div>

<div class="d-none" id="tv">
  <input type="radio" name="start" id="tv_t">昼
  <input type="radio" name="start" id="tv_v">眠前
</div>

<div class="d-none" id="av">
  <input type="radio" name="start" id="av_a">夕
  <input type="radio" name="start" id="av_v">眠前
</div>

<div class="d-none" id="m">
  <input type="radio" name="start" id="m_m">朝
</div>

<div class="d-none" id="t">
  <input type="radio" name="start" id="t_t">昼
</div>

<div class="d-none" id="a">
  <input type="radio" name="start" id="a_a">夕
</div>

<div class="d-none" id="v">
  <input type="radio" name="start" id="v_v">眠前
</div>

絶対もっと賢い方法があるよなぁ...

以下のスクリプトは<head>と</head>の間に記述します。

plice = new Array();
plice[0] = 1000;
plice[1] = 100;
plice[2] = 10;
plice[3] = 1;

function keisan() {
  goukei = 0;
  for (i = 0; i <= 3; i++) {
    if (document.myform.elements[i].checked == true) {
      goukei = goukei + plice[i];
    }
  }
  for (const element of document.getElementsByName('start')) {
    element.checked = false;
  }
  const startm = document.getElementById('start_m');
  const startt = document.getElementById('start_t');
  const starta = document.getElementById('start_a');
  const startv = document.getElementById('start_v');　
  const endm = document.getElementById('end_m');
  const endt = document.getElementById('end_t');
  const enda = document.getElementById('end_a');
  const endv = document.getElementById('end_v');
  startm.style.display = 'none';
  startt.style.display = 'none';
  starta.style.display = 'none';
  startv.style.display = 'none';
  endm.style.display = 'none';
  endt.style.display = 'none';
  enda.style.display = 'none';
  endv.style.display = 'none';
  document.myform.total.value = goukei;
  if (goukei === 1111) {
    document.getElementById('mtav').classList.remove("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1110) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.remove("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1101) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.remove("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1011) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.remove("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 111) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.remove("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1100) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.remove("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1010) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.remove("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1001) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.remove("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 110) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.remove("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 101) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.remove("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 11) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.remove("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1000) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.remove("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 100) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.remove("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 10) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.remove("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 1) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.remove("d-none");
    document.getElementById('default').classList.add("d-none");
  } else if (goukei === 0) {
    document.getElementById('mtav').classList.add("d-none");
    document.getElementById('mta').classList.add("d-none");
    document.getElementById('mtv').classList.add("d-none");
    document.getElementById('mav').classList.add("d-none");
    document.getElementById('tav').classList.add("d-none");
    document.getElementById('mt').classList.add("d-none");
    document.getElementById('ma').classList.add("d-none");
    document.getElementById('mv').classList.add("d-none");
    document.getElementById('ta').classList.add("d-none");
    document.getElementById('tv').classList.add("d-none");
    document.getElementById('av').classList.add("d-none");
    document.getElementById('m').classList.add("d-none");
    document.getElementById('t').classList.add("d-none");
    document.getElementById('a').classList.add("d-none");
    document.getElementById('v').classList.add("d-none");
    document.getElementById('default').classList.remove("d-none");
  }
}

いったい何がしたかったのかというと、

朝に1000、昼に100、夕に10、眠前に1という数値を割り振っておいて、選択されたチェックボックスの数値を合計したら、その合計値から用法がわかるやん！というアイデアを思いついたのです。

例えば合計値1111なら「4×朝昼夕眠前」
合計値1110なら「3×朝昼夕」
合計値1010なら「2×朝夕」みたいに。

で、対応するラジオボタンのグループを表示させているという感じです。非効率的だなあ

「開始時点」で選択されたラジオボタンに対応した「終了時点」のみを表示させるように設定します。

さらに、選択されたラジオボタンが「そのグループの先頭か、そうでないか」で計算式を分岐させます。

あ、jQueryなので、jQueryを呼び出した後に（</body>の直上とかに）書きます。

document.getElementById("calculate").onclick = function () {
  var dts = new Date($('#startDate').val());
  var dte = new Date($('#startDate').val());
  
  if ($('[id=mtav_t]').prop('checked') || $('[id=mtav_a]').prop('checked') || $('[id=mtav_v]').prop('checked') || $('[id=mta_t]').prop('checked') || $('[id=mta_a]').prop('checked') || $('[id=mtv_t]').prop('checked') || $('[id=mtv_v]').prop('checked') || $('[id=mav_a]').prop('checked') || $('[id=mav_v]').prop('checked') || $('[id=tav_a]').prop('checked') || $('[id=tav_v]').prop('checked') || $('[id=mt_t]').prop('checked') || $('[id=ma_a]').prop('checked') || $('[id=mv_v]').prop('checked') || $('[id=ta_a]').prop('checked') || $('[id=tv_v]').prop('checked') || $('[id=av_v]').prop('checked')) {
    dts.setDate(dts.getDate());
    var dayOfWeekStrJPs = ["日", "月", "火", "水", "木", "金", "土", ]
    dte.setDate(dte.getDate() + +$('#days').val());
    var dayOfWeekStrJPe = ["日", "月", "火", "水", "木", "金", "土", ]
    var dateOfStart = `
    ${(dts.getMonth()+1).toString().padStart(2, '0')}/
    ${dts.getDate().toString().padStart(2, '0')}
    ${dayOfWeekStrJPs[dts.getDay()]}
    `.replace(/\n|\r/g, '');
    var dateOfEnd = `
    ${(dte.getMonth()+1).toString().padStart(2, '0')}/
    ${dte.getDate().toString().padStart(2, '0')}
    ${dayOfWeekStrJPe[dte.getDay()]}
    `.replace(/\n|\r/g, '');
    $('#result1').text(dateOfStart);
    $('#result2').text(dateOfEnd);
  } else {
    dts.setDate(dts.getDate());
    var dayOfWeekStrJPs = ["日", "月", "火", "水", "木", "金", "土", ]
    dte.setDate(dte.getDate() + +$('#days').val() - 1);
    var dayOfWeekStrJPe = ["日", "月", "火", "水", "木", "金", "土", ]
    var dateOfStart = `
    ${(dts.getMonth()+1).toString().padStart(2, '0')}/
    ${dts.getDate().toString().padStart(2, '0')}
    ${dayOfWeekStrJPs[dts.getDay()]}
    `.replace(/\n|\r/g, '');
    var dateOfEnd = `
    ${(dte.getMonth()+1).toString().padStart(2, '0')}/
    ${dte.getDate().toString().padStart(2, '0')}
    ${dayOfWeekStrJPe[dte.getDay()]}
    `.replace(/\n|\r/g, '');
    $('#result1').text(dateOfStart);
    $('#result2').text(dateOfEnd);
  };
};

$(function () {
  $('[name="start"]:radio').change(function () {
    var dts = new Date($('#startDate').val());
    var dte = new Date($('#startDate').val());
    if ($('[id=mtav_t]').prop('checked') || $('[id=mtav_a]').prop('checked') || $('[id=mtav_v]').prop('checked') || $('[id=mta_t]').prop('checked') || $('[id=mta_a]').prop('checked') || $('[id=mtv_t]').prop('checked') || $('[id=mtv_v]').prop('checked') || $('[id=mav_a]').prop('checked') || $('[id=mav_v]').prop('checked') || $('[id=tav_a]').prop('checked') || $('[id=tav_v]').prop('checked') || $('[id=mt_t]').prop('checked') || $('[id=ma_a]').prop('checked') || $('[id=mv_v]').prop('checked') || $('[id=ta_a]').prop('checked') || $('[id=tv_v]').prop('checked') || $('[id=av_v]').prop('checked')) {
      dts.setDate(dts.getDate());
      var dayOfWeekStrJPs = ["日", "月", "火", "水", "木", "金", "土", ]
      dte.setDate(dte.getDate() + +$('#days').val());
      var dayOfWeekStrJPe = ["日", "月", "火", "水", "木", "金", "土", ]
      var dateOfStart = `
      ${(dts.getMonth()+1).toString().padStart(2, '0')}/
      ${dts.getDate().toString().padStart(2, '0')}
      ${dayOfWeekStrJPs[dts.getDay()]}
      `.replace(/\n|\r/g, '');
      var dateOfEnd = `
      ${(dte.getMonth()+1).toString().padStart(2, '0')}/
      ${dte.getDate().toString().padStart(2, '0')}
      ${dayOfWeekStrJPe[dte.getDay()]}
      `.replace(/\n|\r/g, '');
      $('#result1').text(dateOfStart);
      $('#result2').text(dateOfEnd);
    } else {
      dts.setDate(dts.getDate());
      var dayOfWeekStrJPs = ["日", "月", "火", "水", "木", "金", "土", ]
      dte.setDate(dte.getDate() + +$('#days').val() - 1);
      var dayOfWeekStrJPe = ["日", "月", "火", "水", "木", "金", "土", ]
      var dateOfStart = `
      ${(dts.getMonth()+1).toString().padStart(2, '0')}/
      ${dts.getDate().toString().padStart(2, '0')}
      ${dayOfWeekStrJPs[dts.getDay()]}
      `.replace(/\n|\r/g, '');
      var dateOfEnd = `
      ${(dte.getMonth()+1).toString().padStart(2, '0')}/
      ${dte.getDate().toString().padStart(2, '0')}
      ${dayOfWeekStrJPe[dte.getDay()]}
      `.replace(/\n|\r/g, '');
      $('#result1').text(dateOfStart);
      $('#result2').text(dateOfEnd);
    };
    if ($('[id="mtav_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="mtav_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mtav_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mtav_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mta_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mta_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mta_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mtv_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="mtv_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mtv_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mav_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="mav_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mav_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="tav_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="tav_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="tav_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mt_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mt_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="ma_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="ma_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="mv_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="mv_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="ta_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="ta_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="tv_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="tv_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="av_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    } else if ($('[id="av_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="m_m"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'inline');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'inline');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="t_t"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'inline');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'inline');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="a_a"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'inline');
        $('#start_v').css('display', 'none');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'inline');
        $('#end_v').css('display', 'none');
      });
    } else if ($('[id="v_v"]').prop('checked')) {
      $(function () {
        $('#start_m').css('display', 'none');
        $('#start_t').css('display', 'none');
        $('#start_a').css('display', 'none');
        $('#start_v').css('display', 'inline');
        $('#end_m').css('display', 'none');
        $('#end_t').css('display', 'none');
        $('#end_a').css('display', 'none');
        $('#end_v').css('display', 'inline');
      });
    }
  });
});

絶対どこかおかしいよなとは思うのですが、一応、想定していた挙動は実現できました。

ラジオボタン変更時には自動で再計算してくれます。

日付入力欄、日数入力欄、チェックボックスにもonchangeを設定したかったのですが、私はここで力尽きました。

iPhoneでは「日数」を入力後「日数：」と「日分」の文字が下にずれるという謎の現象が起きます。縦と横を持ち替えてみると直ったり直らなかったりします。なんでやねん。

ケミストでは引き続き「ブログ」のテーマを募集しています！
調べてほしい、まとめてほしい薬の情報がありましたら教えてください。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP