Блог

Я обновил загрузочную версию с версии 3 до 4 и заметил, что календарь перекрывается при его создании с помощью js вместо cshtml. Нет необходимости возвращаться назад более чем на несколько дней, поэтому я хотел бы отключить кнопку «Месяц», которая изменяет режим просмотра на месяцы или годы. Есть ли конкретное свойство CSS, которое мне нужно, или мне нужно будет отредактировать код в библиотеке?

 function AddDateTimeControl(parent, control, rowIndex, controlIndex) {
    var dateTimeID = "datetimepicker"   controlIndex;

    var tooltipDiv = CreateTooltipDiv();
    var tooltipSpan = CreateTooltipSpan(control.ToolTip);
    var label = CreateControlLabel(control);
    //var icon = CreateIcon('fa-calendar');
    var icon = CreateIcon("calendar-alt-regular");

    tooltipDiv.appendChild(label);
    tooltipDiv.appendChild(icon);
    tooltipDiv.appendChild(tooltipSpan);

    var dateDiv = document.createElement("div");
    dateDiv.classList.add('input-group');
    dateDiv.classList.add('date');
    dateDiv.classList.add('date-time-control');
    dateDiv.style.color = "black";
    dateDiv.id = dateTimeID;

    var dateTextBox = document.createElement("input");
    dateTextBox.type = "text";
    dateTextBox.classList.add("form-control");
    dateTextBox.value = control.RawValues[0];

    MarkElementForSerialization(dateTextBox, rowIndex, control.ID, 0);

    var calControlSpan = document.createElement("span");
    calControlSpan.classList.add('input-group-append'); //input-group-addon?
    //span -> fa-calendar?

    dateDiv.appendChild(dateTextBox);
    dateDiv.appendChild(calControlSpan); //input-group-addon

    parent.appendChild(tooltipDiv);
    parent.appendChild(dateDiv);

    $(dateDiv).datetimepicker();
    $(dateDiv).data("DateTimePicker").sideBySide(true);
    $(dateDiv).data("DateTimePicker").date(new Date(Date.parse(control.RawValues[0])));
    $(dateDiv).data("DateTimePicker").format("MM/DD/YYYY HH:mm");
    $(dateDiv).data("DateTimePicker").icons({
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        previous: "fa fa-chevron-left",
        next: "fa fa-chevron-right",
        today: "fa fa-clock-o",
        clear: "fa fa-trash-o"
    });

    $(dateTextBox).on('click', function() {
        $(dateDiv).data("DateTimePicker").toggle();
    });
}
 

Это будет полностью зависеть от того, какой компонент datetimepicker вы используете.

Это позволяет вам установить максимальный вид:

 $(dateDiv).datetimepicker({ maxView: 1 })
 

Однако он никогда не обновлялся для поддержки начальной загрузки 4.

С тех пор этот выбор был отменен в пользу eonasdan-bootstrap-datetimepicker, который имеет возможность устанавливать минимальное представление, но не максимальное. Вам нужно будет изучить код для этой версии, если вы хотите добавить эту опцию.

Существует более новая версия сборщика Eonasdan, теперь называемая tempus dominus, которая в настоящее время находится в альфа-версии. Эта версия предоставляет опции для включения или выключения отдельных представлений:

 $(dateDiv).tempusDominus({
   display: {
     viewMode: 'date',
     components: {
       decades: false,
       year: false,
       month: false,
       date: true,
       hours: true,
       minutes: true,
       seconds: false
     }
   }
})
 

В итоге я отключил его, отключив событие указателя в переключателе выбора месяца.

 th.picker-switch[title="Select Month"] {
    pointer-events: none;
}