Como muchos otros, me he encontrado con numerosos problemas al intentar hacer esto, y solo una combinación de las soluciones publicadas, y eventualmente un gran truco para hacerlo perfecto, tiene me dado una solución.
Problemas con otras soluciones en este hilo que he probado:
- Al seleccionar una nueva fecha en un selector de fechas, también cambiaría la fecha (interna) de otros seleccionadores de fechas, por lo que cuando abriera los otros nuevamente (o intentara obtener su fecha), tendrían una fecha diferente a la que se muestra en su entrada asignada -campo.
- El selector de fechas no "recordará" la fecha cuando se abre de nuevo.
- El código para hacer malabares con las fechas usaba subcadenas, por lo que no era compatible con todos los formatos.
- "Mi selección de mes" solo cambió el campo de entrada al cerrarlo, en lugar de cuando se cambiaron los valores.
- El campo de entrada no se actualiza correctamente, si escribe una cadena de entrada con formato incorrecto para una fecha y luego hace clic en 'Cerrar' en el selector de fechas.
- No puedo tener datepickers normales, que muestran los días, en la misma página que los mespickers, que no muestran los días.
Finalmente he encontrado una manera de solucionar todos estos problemas . Los primeros cuatro se pueden solucionar simplemente teniendo cuidado de cómo hace referencia a sus selectores de fecha y mes en su código interno y, por supuesto, haciendo alguna actualización manual de sus selectores. Esto se puede ver en los ejemplos de instanciación cerca de la parte inferior. El quinto problema puede solucionarse agregando un código personalizado a las funciones de selector de fechas.
NOTA: NO necesita utilizar los siguientes scripts de selección de mes para solucionar los primeros tres problemas en su selector de fecha normal. Simplemente use el script de instanciación datepicker cerca del final de esta publicación.
Ahora, para usar los marcadores de mes y solucionar el último problema, necesitamos separar los marcadores de fecha y los marcadores de mes. Podríamos obtener uno de los pocos complementos de jQuery-UI monthpicker, pero algunos carecen de flexibilidad / capacidad de localización, algunos carecen de soporte de animación ... entonces, ¿qué hacer? ¡Haga rodar su "propio" del código datepicker! Esto le ofrece un selector de mes completamente funcional, con todas las funcionalidades del selector de fecha, solo que sin mostrar días.
He suministrado una monthpicker js-escritura y el CSS-script que acompaña , usando el método descrito a continuación, con el código v1.11.1 jQuery-UI. Simplemente copie estos fragmentos de código en dos archivos nuevos, monthpicker.js y monthpicker.css, respectivamente.
Si desea leer sobre el proceso bastante simple por el cual convertí el selector de fecha en un selector de mes, desplácese hacia abajo hasta la última sección.
¡Ahora para agregar los datepickers y mespickers a la página!
¡Estos siguientes fragmentos de código de JavaScript funcionan con múltiples fechadores y / o meseros en la página, sin los problemas mencionados anteriormente! Solucionado generalmente usando '$ (this)'. mucho :)
El primer script es para un selector de fechas normal, y el segundo es para los "nuevos" seleccionadores de mes.
El .after comentado , que le permite crear algún elemento para borrar el campo de entrada, es robado de la respuesta de Paul Richards.
Estoy usando el formato "MM aa" en mi selector de mes y el formato 'aa-mm-dd' en mi selector de fecha, pero esto es completamente compatible con todos los formatos , por lo que puede usar el que desee. Simplemente cambie la opción 'dateFormat'. Las opciones estándar 'showButtonPanel', 'showAnim' y 'yearRange' son, por supuesto, opcionales y personalizables según sus deseos.
Agregar un selector de fechas
Creación de una instancia de Datepicker.
Este va desde hace 90 años y hasta nuestros días. Le ayuda a mantener el campo de entrada correcto, especialmente si establece las opciones defaultDate, minDate y maxDate, pero puede manejarlo si no lo hace. Funcionará con cualquier formato de fecha que elija.
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Agregar un selector de mes
Incluya el archivo monthpicker.js y el archivo monthpicker.css en la página que desea usar los mespickers.
Creación de instancias de Monthpicker
El valor recuperado de este mespicker es siempre el PRIMER día del mes seleccionado. Comienza en el mes actual y abarca desde hace 100 años y 10 años en el futuro.
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
¡Eso es!
Eso es todo lo que necesitas para hacer un mes.
Parece que no puedo hacer que un jsfiddle funcione con esto, pero está funcionando para mí en mi proyecto ASP.NET MVC. Simplemente haga lo que normalmente hace para agregar un selector de fecha a su página e incorpore los scripts anteriores, posiblemente cambiando el selector (que significa $ ("# MyMonthTextBox")) a algo que funcione para usted.
Espero que esto ayude a alguien.
Enlaces a pastebins para algunas configuraciones adicionales de selección de fecha y mes:
Monthpicker trabajando el último día del mes . La fecha que obtenga de este selector de mes siempre será el último día del mes.
Dos meseros colaboradores ; 'inicio' funciona el primer mes y 'fin' funciona el último mes. Ambos están restringidos entre sí, por lo que elegir un mes en 'fin' que es anterior al mes seleccionado en 'inicio' cambiará 'inicio' para que sea el mismo mes que 'fin'. Y viceversa. OPCIONAL: Al seleccionar un mes en 'inicio', el 'minDate' en 'fin' se establece en ese mes. Para eliminar esta función, comente una línea en onClose (lea los comentarios).
Dos datepickers colaboradores ; Ambos están restringidos entre sí, por lo que elegir una fecha en 'fin' que sea anterior a la fecha seleccionada en 'inicio' cambiará 'inicio' para que sea el mismo mes que 'fin'. Y viceversa. OPCIONAL: Al seleccionar una fecha en 'inicio', el 'minDate' en 'fin' se establece en esa fecha. Para eliminar esta función, comente una línea en onClose (lea los comentarios).
Cómo cambié el DatePicker para que sea un MonthPicker
Tomé todo el código javascript de jquery-ui-1.11.1.js perteneciente a su selector de fechas, lo pegué en un nuevo archivo js y reemplacé las siguientes cadenas:
- "datepicker" ==> "mespicker"
- "Datepicker" ==> "Monthpicker"
- "selector de fecha" ==> "selector de mes"
- "Selector de fecha" ==> "Selector de mes"
Luego eliminé la parte del ciclo for que crea todo el div ui-datepicker-calendar (el div que otras soluciones ocultan usando CSS). Esto se puede encontrar en _generateHTML: function (inst).
Encuentra la línea que dice:
"</div><table class='ui-datepicker-calendar'><thead>" +
Marque todo desde después del cierre de la etiqueta div y hacia abajo (y sin incluir) la línea donde dice:
drawMonth++;
Ahora será infeliz porque necesitamos cerrar algunas cosas. Después de cerrar la etiqueta div de antes, agregue esto:
";
El código ahora debería estar bien unido. Aquí hay un fragmento de código que muestra lo que debería haber terminado:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
Luego copié / pegué el código de jquery-ui.css perteneciente a los datepickers a un nuevo archivo CSS, y reemplacé las siguientes cadenas:
- "datepicker" ==> "mespicker"
