Получение значения daterangepicker

Я могу вернуть только первую выбранную дату, и я хочу получить одну строку, содержащую все это!

Я провел исследование, которое привело меня ко многим подобным вопросам, подобным этому: ссылка, но я не могу получить ответ, который ищу

Это мой код:

HTML

<!-- Date range -->
        <div class="form-group">
            <label>Période:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" id="reservation" onchange=""/>
            </div><!-- /.input group -->
        </div><!-- /.form group -->

ЯВАСКРИПТ

        $(function () {
            //Date range picker
            $('#reservation').daterangepicker({
                onSelect: function (d, i) {
                    if (d !== i.lastVal) {
                        $(this).change();
                    }
                }
            });
        });

        $(document).ready(function () {
            $("#reservation").change(function () {
                var date = $("#reservation").val() + "-" + $("#reservation").daterangepicker("getDate");
                $("#partialtable").load('@(Url.Action("GetDateResults", "Temps", null, Request.Url.Scheme))?date=' + date);
            });
        });

Если я выберу диапазон дат: 01.06.2017 - 22.06.18, в моем контроллере появится только "01.06.2017".

ОБНОВЛЕНИЕ

«var date» содержит правильное значение, но кажется, что строка обрезается на первом пробеле при отправке значения в действие контроллера.

Спасибо!