現在日時の一括入力について

概要

記事登録画面で、現在日時を一括入力するボタンを設置する方法です。

現在日時の一括入力について

広告

詳細

エントリー登録画面に現在日時を一括入力する機能を追加する場合、templates/internals/admin/entry_form.html の100行目あたりにある

<input type="text" name="entry[datetime][year]" size="4" value="{$input.entry.datetime|date_format:'%Y'}" />
年
<input type="text" name="entry[datetime][month]" size="2" value="{$input.entry.datetime|date_format:'%m'}" />
月
<input type="text" name="entry[datetime][day]" size="2" value="{$input.entry.datetime|date_format:'%d'}" />
日
<input type="text" name="entry[datetime][hour]" size="2" value="{$input.entry.datetime|date_format:'%H'}" />
時
<input type="text" name="entry[datetime][minute]" size="2" value="{$input.entry.datetime|date_format:'%M'}" />
分
<input type="text" name="entry[datetime][second]" size="2" value="{$input.entry.datetime|date_format:'%S'}" />
秒

この各部分に、以下のようにIDを追加します。

<input type="text" name="entry[datetime][year]" size="4" value="{$input.entry.datetime|date_format:'%Y'}" id="datetime_year" />
年
<input type="text" name="entry[datetime][month]" size="2" value="{$input.entry.datetime|date_format:'%m'}" id="datetime_month" />
月
<input type="text" name="entry[datetime][day]" size="2" value="{$input.entry.datetime|date_format:'%d'}" id="datetime_day" />
日
<input type="text" name="entry[datetime][hour]" size="2" value="{$input.entry.datetime|date_format:'%H'}" id="datetime_hour" />
時
<input type="text" name="entry[datetime][minute]" size="2" value="{$input.entry.datetime|date_format:'%M'}" id="datetime_minute" />
分
<input type="text" name="entry[datetime][second]" size="2" value="{$input.entry.datetime|date_format:'%S'}" id="datetime_second" />
秒

日時整形プラグインを導入している場合、以下のようにセレクトボックスにIDを追加します。

<select name="entry[datetime][year]" id="datetime_year">
  {$input.entry.datetime|date_format:'%Y'|date_select:'year':'':'年'}
</select>
<select name="entry[datetime][month]" id="datetime_month">
  {$input.entry.datetime|date_format:'%m'|date_select:'month':'':'月'}
</select>
<select name="entry[datetime][day]" id="datetime_day">
  {$input.entry.datetime|date_format:'%d'|date_select:'day':'':'日'}
</select>
<select name="entry[datetime][hour]" id="datetime_hour">
  {$input.entry.datetime|date_format:'%H'|date_select:'hour':'':'時'}
</select>
<select name="entry[datetime][minute]" id="datetime_minute">
  {$input.entry.datetime|date_format:'%M'|date_select:'minute':'':'分'}
</select>
<select name="entry[datetime][second]" id="datetime_second">
  {$input.entry.datetime|date_format:'%S'|date_select:'second':'':'秒'}
</select>

次に、同ページに以下のボタンを設置します。場所はどこでも大丈夫ですが、日時入力欄の近くに表示させるといいでしょう。

<input type="button" value="現在日時" id="setDatetime" />

ページ登録画面に現在日時を一括入力する機能を追加する場合、templates/internals/admin/page_form.html の115行目あたりにある日付入力欄にも、同様にIDを追加します。（上のコードを丸ごとコピー＆ペーストすると entry というコードが含まれてしまうので、ID部分のみ追加してください。）

次に、js/admin.js の10行目あたりにある

$(document).ready(function() {

この直後に、以下のコードを追加します。

//現在日時設定
$('#setDatetime').click(function() {
  var now = new Date();

  var year   = now.getFullYear();
  var month  = now.getMonth() + 1;
  var day    = now.getDate();
  var hour   = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  if (month  < 10) { month  = '0' + month;  }
  if (day    < 10) { day    = '0' + day;    }
  if (hour   < 10) { hour   = '0' + hour;   }
  if (minute < 10) { minute = '0' + minute; }
  if (second < 10) { second = '0' + second; }

  $('#datetime_year').val(year);
  $('#datetime_month').val(month);
  $('#datetime_day').val(day);
  $('#datetime_hour').val(hour);
  $('#datetime_minute').val(minute);
  $('#datetime_second').val(second);
});

これで「現在日時」ボタンを押すと、現在の日時が一括入力されるようになります。