javascript - bootstrap-datetimepicker: 入力値の表示

Question

最初のページロード時に入力テキスト フィールドに値を表示するように datetimepicker を説得するにはどうすればよいですか?

この場合、datepicker text-input の value 属性はすでに設定されていますが、フィールドは空白で表示されます。したがって、「data-date-defaultdate」属性を設定しようとしましたが、最初のページロードではテキスト フィールドはまだ空白です。リロード後、期待どおりに値が表示されます。

フォーム (抜粋):

<form name="news" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label required" for="news_validFrom">Start time</label>
        <div class="col-sm-8 col-md-6">
            <div class="input-group date datetime-picker" id="datetime1">
                <input type="text" id="news_validFrom" name="news[validFrom]" required="required" class="form-control" value="2016-07-08T00:00:00+02:00" />
                <span class="input-group-addon">
                    <span class="fa fa-calendar"></span>
                </span>

            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label required" for="news_validTo">End date</label>
        <div class="col-sm-8 col-md-6">
            <div class="input-group date date-picker" id="datetime2">
                <input type="text" id="news_validTo" name="news[validTo]" required="required" class="form-control" value="2016-06-22T00:00:00+02:00" />
                <span class="input-group-addon">
                    <span class="fa fa-calendar"></span>
                </span>

            </div>
        </div>
    </div>
// [...]
</form>

スクリプト：

$(function () {
    $('#datetime1')
    .attr('data-date-defaultdate', $('#datetime1 input').attr('value'))
    .datetimepicker({
        format: 'DD MMM YYYY HH:mm',
        defaultDate: $('#datetime1 input').attr('value'),
        viewDate: 'true'
    });
    $('#datetime2')
    .attr('data-date-defaultdate', $('#datetime2 input').attr('value'))
    .datetimepicker({
        format: 'DD MMM YYYY HH:mm',
        defaultDate: $('#datetime2 input').attr('value')
    });
});

これを機能させる方法はありますか？