DatePicker устанавливает дату на несколько лет вперед / назад по клику

Question

Я пытаюсь выбрать период даты, используя два средства выбора даты (из bootstrap4), но когда я нажимаю кнопку, чтобы открыть средство выбора, она меняет текущую дату модели на дату, которая на 1 год вперед или несколько лет назад, по сравнению с текущая дата.

Я реализовал средство выбора даты с помощью javascript (два способа попытаться выяснить, как исправить ошибку):

Первый инструмент выбора даты, в котором я пробовал с различными настройками:

<script>
    $('#datepickerStart').datepicker({
        uiLibrary: 'bootstrap4',
            autoclose: true,
            format: "mm-dd-yyyy",
            immediateUpdates: true,
            todayBtn: true,
            todayHighlight: true
        }).datepicker("setDate", "01/01/2020");
</script>

Второй DatePicker, как я его изначально реализовал:

<script>
    $('#datepickerEnd').datepicker({
        uiLibrary: 'bootstrap4',
        "setDate": new Date(),
        "autoclose": true
    });
</script>

Вот как это выглядит, когда я использую код:

Поле даты окончания сначала выглядит как поле даты начала (то есть "24-03-2020"), но когда я нажимаю кнопку выбора, чтобы открыть календарь, оно автоматически вставляет дата 12/03/2021 в поле и идет к декабрю в календаре ..

Используются атрибуты viewmodel:

public string PeriodStart { get; set; }
public string PeriodEnd { get; set; }

Я пробовал:

• Изменение атрибутов на DateTime
• Форма введите строку, чтобы она соответствовала формату мм / дд / гггг ('/' вместо '-')

Что мне здесь не хватает? Кажется, что он не использует настройки, которые я установил для DatePicker, как мне сделать так, чтобы он использовал их?

Вот элементы, которые я пытаюсь использовать DatePicker на:

        <div class="form-group input-group-sm">
            @Html.Label("Start Date")
            @Html.TextBoxFor(model => model.PeriodStart, new { id = "datepickerStart" })
        </div>

        <div class="form-group input-group-sm">
            @Html.Label("End Date")
            @Html.TextBoxFor(model => model.PeriodEnd, new { id = "datepickerEnd" })
        </div>

Редактировать Используются файлы. js и. css:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />

Взятые из этого примера: https://gijgo.com/datepicker/example/bootstrap-4

Обновлено с GIF https://imgur.com/YstzXoY

Answer 1

Я нашел решение. В моем методе, где я создаю свою ViewModel, я установил начальную дату на текущую дату, которая испортила указатель даты (скорее всего из-за форматирования, как предложил Марк Шультхайс).

Я удалил код, показанный ниже, и теперь средство выбора даты открывается с текущей датой.

viewModel.PeriodStart = DateTime.Now.Date.ToString();
viewModel.PeriodStart = viewModel.PeriodStart.Substring(0, 10);