javascript - attribute - title css
En busca del selector de mes de JavaScript (6)
Utilicé este script en un programa hace un tiempo. Si bien es antiguo, funciona bien en todos los navegadores. Si miras hacia abajo a "Mes-seleccionar calendario", creo que eso es lo que estás buscando. El ejemplo que está allí tiene la apertura del calendario en una nueva ventana (ew) pero la configuración 1 (como el segundo ejemplo) lo hace mostrar ala jQuery. Buena suerte.
Estoy en busca de una herramienta de selección de mes de JavaScript. Ya estoy usando jQuery en el sitio web, así que si fuera un plugin jQuery, eso encajaría muy bien. Estoy abierto a otras opciones, también.
Básicamente, busco una versión simplificada del jQuery UI Date Picker . No me importa el día del mes, solo el mes y el año. Usar el control del selector de fecha se siente como un exceso y un error. Sé que podría usar un par de cuadros de selección, pero eso se siente abarrotado, y luego también necesito un botón de confirmación.
Estoy visualizando una grilla de dos filas de seis columnas o tres filas de cuatro columnas para la selección de meses y años actuales y futuros en la parte superior. (¿Tal vez la capacidad de enumerar algunos años? No puedo ver a nadie que necesite ir más de uno o dos años más adelante, así que si pudiera enumerar el actual y los próximos dos años, sería genial).
Es realmente una versión simplificada del DatePicker. Existe algo como esto?
El otro día escogí un selector de fechas. Encontré otros dos ejemplos interesantes que podrían ayudarte, pero no estoy seguro de cómo vas a hacer esto sin mostrar el calendario. La mayoría de los "selectores de fecha" solo asumen que querrá ver un calendario. Es mejor que busque un menú desplegable personalizado que tenga algunos botones personalizados que puede configurar.
Aquí están los que miré:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
Terminé usando este: http://jqueryui.com/demos/datepicker/
Si eres bueno con JQuery, es posible que hayas creado un buen proyecto.
Para cualquier persona que todavía esté esperando esto (como yo), aquí hay una hermosa, fácil de usar, jQuery UI compatible, bien documentada, probada alternativa:
Su uso predeterminado es simple como hacer lo siguiente:
$("input[type=''month'']").MonthPicker();
No dudes en echar un vistazo a mi propio plugin jQuery:
Fácil de usar :
$("#myTextInput").Monthpicker();
Todavía no hay muchas opciones, pero puede vincular la entrada a un rango restringido de meses.
También hay eventos que ofrecen una forma de codificar la interdependencia entre dos mespicker (fecha de inicio y finalización)
Puede encontrar una demostración en vivo aquí: Codepen
Eres libre de tomar el código fuente de Github y cambiar lo que quieras: repositorio de Github
Encontré uno en lucianocosta.info . Se ve bastante bien:
ACTUALIZADO el 13/02/2016: enlace que funciona
Ben Koehler de esta pregunta equivalente ofrece un jquery ui hack que funciona decentemente. Citado aquí por conveniencia, todo el crédito es suyo.
- Aquí hay un truco (actualizado con todo el archivo .html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$(''.date-picker'').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: ''MM yy'',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker(''setDate'', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>