記事等の編集画面で日付が入力されたときに時刻の初期値も自動入力する

先日、MTQに以下のような要望が上がっていました。

記事の公開終了日をカレンダーから選択すると、日付は入りますが、時間は入りません。
そのまま保存すると「YYYY-MM-DD HH:MM:SSの形式で入力してください。」というエラーが出てしまうため、出来れば時間も自動で挿入されるとユーザーにも判り易いのではと思います。

MTAppjQueryで管理画面をカスタマイズすれば、日付が入力された時点で、時刻の初期値を自動的に入力することができます。
その方法を紹介します。

1.考え方

このカスタマイズの考え方は、以下のようになります。

1-1.記事の公開日／公開終了日

Movable Typeの記事の編集画面では、公開日と公開終了日の入力欄（input要素）には「date」のクラスが割り当てられています。
そこで、クラスが「date」の要素で、値が変化した時のイベント（change）を処理して、日付が入力されていれば時刻の初期値を設定するようにします。
また、日付が削除されたときには、合わせて時刻も削除するようにします。

また、対になっている日付と時刻の入力欄では、name属性の値の最後が「date」と「time」になっています。
この性質を利用すれば、日付が入力された要素から、それに対応する時刻の入力欄の要素を得ることができます。

1-2.「日付と時刻」型のカスタムフィールド

「日付と時刻」の型のカスタムフィールドを作ることもできます。
このようなカスタムフィールドでは、日付の入力欄には「entry-date」というクラスが割り当てられています。
そこで、クラスが「entry-date」の要素で、値が変化した時のイベント（change）を処理して、日付が入力されていれば時刻の初期値を設定するようにします。
また、対になっている日付と時刻の入力欄では、name属性の値の先頭が「d_」と「t_」になっています。
この性質を利用すれば、日付が入力された要素から、それに対応する時刻の入力欄の要素を得ることができます。

ただし、カスタムフィールドでは「日付のみ」の入力欄を作ることもできます。
この場合、画面上には時刻の入力欄は出ませんが、HTMLには時刻用にtype="hidden"のinput要素も出力されます。
そこで、日付と時刻の両方の要素が表示されているときだけ、時刻の初期値を設定する処理を行うようにします。

2.user.jsの書き換え

ここまでの話に基づいて、MTAppjQueryプラグインのuser.jsファイルを以下のように書き換えます。

(function($){
    $('.date').on('change', function() {
        var d_elm = $(this);
        var n_date = d_elm.prop('name');
        var n_time = n_date.replace(/date$/, 'time');
        var t_elm = $('input[name="' + n_time + '"]')
        if (d_elm.val() == '') {
            t_elm.val('');
        }
        else if (t_elm.val() == '') {
            t_elm.val('00:00:00');
        }
    });

    $('.entry-date').on('change', function() {
        var d_elm = $(this);
        var n_date = d_elm.prop('name');
        var n_time = n_date.replace(/^d_/, 't_');
        var t_elm = $('input[name="' + n_time + '"]')
        var is_hidden = (t_elm.attr('type') == 'hidden');
        if (d_elm.val() == '' && !is_hidden) {
            t_elm.val('');
        }
        else if (t_elm.val() == '' && !is_hidden) {
            t_elm.val('00:00:00');
        }
    });
    ・
    ・（その他の処理）
    ・
})(jQuery);

前半は、記事の公開日／公開終了日で時刻の初期値を自動入力する処理です。
まず、日付が入力された要素から、それと対になる時刻の要素を得ます（3～6行目）。
そして、日付に値が入力されていなければ、時刻の値もクリアします（7～9行目）。
一方、日付に値が入力されていて、時刻に値がないときは、時刻の初期値として「00:00:00」をセットします（10～12行目）。

後半は、カスタムフィールドで時刻の初期値を自動入力する処理です。
考え方は、記事の公開日／公開終了日の場合とほぼ同じです。
ただし、日付のみのフィールドの場合は、日付が入力されても、時刻の値を変えないようにしています。