Actualicé bootstrap de la versión 3 a la 4 y noté que el calendario se superpone al crearlo con js en lugar de cshtml. No es necesario retroceder más de unos pocos días, por lo que me gustaría desactivar el botón de mes que cambia el modo de visualización a meses o años. ¿Hay una propiedad CSS específica que necesito o necesitaría editar un código en la biblioteca?
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(); }); }Eso dependerá completamente del componente datetimepicker que esté utilizando.
Este te permite establecer la vista máxima:
$(dateDiv).datetimepicker({ maxView: 1 })Sin embargo, nunca se actualizó para admitir Bootstrap 4.
Desde entonces, ese selector ha quedado obsoleto en favor de eonasdan-bootstrap-datetimepicker , que tiene una opción para establecer la vista mínima , pero no la vista máxima . Tendría que profundizar en el código de esa versión si desea agregar esa opción.
Hay una versión más reciente del selector Eonasdan, ahora llamado tempus dominus , que actualmente se encuentra en versión alfa. Esa versión proporciona opciones para activar o desactivar las vistas individuales :
$(dateDiv).tempusDominus({ display: { viewMode: 'date', components: { decades: false, year: false, month: false, date: true, hours: true, minutes: true, seconds: false } } })Terminé desactivándolo al deshabilitar el evento de puntero en el interruptor del selector de mes.
th.picker-switch[title="Select Month"] { pointer-events: none; }