bootstrap-daterangepicker でいい感じに1つのスクリプトで複数のフォームで動くようにする方法。
https://github.com/dangrossman/daterangepicker

こんな感じなんですが・・問題が

最小構成で大体以下のような感じ書きますが…

    moment.locale('ja');
    $('.datepicker').daterangepicker({
        timePicker: false,
        singleDatePicker: true,
        //autoUpdateInput: false, //空白許可
        format: 'YYYY-MM-DD'
    });

空白を許可しない場合はこれでいいんですが、空白を許可したい場合はautoUpdateInput: falseを設定する必要があります。
ただし、この場合はコールバックでフォームに設定値を書き込む必要があり、こんな感じになるかとおもいます。

    moment.locale('ja');
    $('.datepicker').daterangepicker({
        timePicker: false,
        singleDatePicker: true,
        //autoUpdateInput: false, //空白許可
        format: 'YYYY-MM-DD'
    },
    function (date) {
                $('.datepicker').val(date.format('YYYY/MM/DD'));
       }
    );

これだと、フォーム1つに対して1つづつ書かないといけないので面倒です。
ということで

    function callback(date){
        $(this.element).val(date.format('YYYY-MM-DD'));
    }
    moment.locale('ja');
    $('.datepicker').daterangepicker({
        timePicker: false,
        singleDatePicker: true,
        autoUpdateInput: false, //空白許可
        format: 'YYYY-MM-DD'
    },callback);

これでOK。

こんな感じなんですが・・問題が

タグ