qDate: 日付を増減

<button type='button' onclick='user_addYmdQDate( "q_DueDate", 0, 0, -7 );'>-7d</button>
<button type='button' onclick='user_addYmdQDate( "q_DueDate", 0, 0, -1 );'>-1d</button>
<button type='button' onclick='user_addYmdQDate( "q_DueDate", 0, 0, 1 );'>+1d</button>
<button type='button' onclick='user_addYmdQDate( "q_DueDate", 0, 0, 7 );'>+7d</button>
<span id="user_footnote_DueDate"></span>

<style>
/* A dark background and white text create a modern look */
/* 暗い背景色と白い文字でモダンな印象に */
#user_footnote_DueDate span {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: bold;
  color: #FFF;
}
.user_footnote_future { background-color: #26A69A; }
.user_footnote_soon   { background-color: #66BB6A; }
.user_footnote_today  { background-color: #FFD54F; color: #333; }
.user_footnote_past   { background-color: #EF5350; }
</style>

<script>
/// https://questetra.zendesk.com/hc/ja/articles/4406943475097-R2132#event-handler
// Turn on the function that run when...
qbpms.form.on('ready',               user_setFootnote_DueDate); // the page is ready (loaded)
qbpms.form.on('change', 'q_DueDate', user_setFootnote_DueDate); // the input-form is changed.


/**
 * Calculate the time remaining until the due date and display it in a footnote
 * 期日までの残り時間を計算し、フットノートに表示する関数
 */
function user_setFootnote_DueDate() {
  const dateTarget = qbpms.form.get("q_DueDate");         // ★★★ EDIT FieldName ★★★
  const elFootnote = document.querySelector('#user_footnote_DueDate');
  if (!dateTarget || !elFootnote) {
    if (elFootnote) elFootnote.innerHTML = "";
    return;
  }
  const now = new Date();
  now.setHours(0, 0, 0, 0);
  const targetDate = new Date(dateTarget.getTime());
  targetDate.setHours(0, 0, 0, 0);
  const diffDays = (targetDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
  const dayOfWeekStr = ['日', '月', '火', '水', '木', '金', '土'][dateTarget.getDay()];
  let content = '';
  let className = '';
  if (diffDays >= 2) {
    className = 'user_footnote_future';
    content = `${diffDays}日後 (${dayOfWeekStr})`;
  } else if (diffDays === 1) {
    className = 'user_footnote_soon';
    content = `明日 (${dayOfWeekStr})`;
  } else if (diffDays === 0) {
    className = 'user_footnote_today';
    content = `今日 (${dayOfWeekStr})`;
  } else if (diffDays === -1) {
    className = 'user_footnote_past';
    content = `昨日 (${dayOfWeekStr})`;
  } else if (diffDays === -2) {
    className = 'user_footnote_past';
    content = `一昨日 (${dayOfWeekStr})`;
  } else {
    className = 'user_footnote_past';
    content = `${Math.abs(diffDays)}日前 (${dayOfWeekStr})`;
  }
  elFootnote.innerHTML = `<span class="${className}">${content}</span>`;
}

/**
 * Increments or decrements the date
 * 指定されたデータ項目の日付を増減させる関数
 */
function user_addYmdQDate(qfieldName, numY, numM, numD, numHour = 0, numMin = 0) {
  let dateTmp = qbpms.form.get(qfieldName);
  if (dateTmp === null) { return; }
  dateTmp.setFullYear(dateTmp.getFullYear() + numY);
  dateTmp.setMonth(dateTmp.getMonth() + numM);
  dateTmp.setDate(dateTmp.getDate() + numD);
  dateTmp.setHours(dateTmp.getHours() + numHour);
  dateTmp.setMinutes(dateTmp.getMinutes() + numMin);
  qbpms.form.set(qfieldName, dateTmp);
  user_setFootnote_DueDate();
}
</script>