jquery - ejemplos - datepicker mindate
getDate con Jquery Datepicker (5)
Estoy tratando de obtener la fecha de mi implementación del selector de fecha jQuery, agregarla a una cadena y mostrar la imagen resultante en mi div. Algo sin embargo simplemente no funciona. ¿Alguien puede revisar el código y echarle un vistazo?
Se supone que el código toma la fecha del selector de fecha, lo combina en una cadena que debe tener el código necesario para mostrar la etiqueta, las imágenes se encuentran en / imagen y en el formato aYY-MM-DD.png, nuevo a esta fecha Selector y todavía no puedo bajarlo del todo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$(''#datepicker'').datepicker({
dateFormat: ''yy-mm-dd'',
inline: true,
minDate: new Date(2010, 1 - 1, 1),
maxDate:new Date(2010, 12 - 1, 31),
altField: ''#datepicker_value'',
});
//hover states on the static widgets
$(''#dialog_link, ul#icons li'').hover(
function() { $(this).addClass(''ui-state-hover''); },
function() { $(this).removeClass(''ui-state-hover''); }
);
});
//var img_date = .datepicker(''getDate'');
var day1 = $("#datepicker").datepicker(''getDate'').getDate();
var month1 = $("#datepicker").datepicker(''getDate'').getMonth() + 1;
var year1 = $("#datepicker").datepicker(''getDate'').getFullYear();
var fullDate = year1 + "-" + month1 + "-" + day1;
var str_output = "<h1><center><img src=/"/images/a" + fullDate + ".png/"></center></h1><br/><br>";
page_output.innerHTML = str_output;
// writing the results to the div element (page_out)
</script>
</head>
<body style="background-color:#000;color:#fff;margin: auto auto;">
<!-- Datepicker -->
<div id="datepicker"></div>
<!-- Highlight / Error -->
<p>Date Value: <input type="text" id="datepicker_value" /></p>
<div id="page_output" style="text-align:center; margin-top:80px; margin-bottom:20px; "></div>
</body>
Creo que desearía agregar un controlador de eventos ''onSelect'' a la inicialización de su seleccionador de fechas para que su código se active cuando el usuario selecciona una fecha. Pruébalo en jsFiddle
$(document).ready(function(){
// Datepicker
$(''#datepicker'').datepicker({
dateFormat: ''yy-mm-dd'',
inline: true,
minDate: new Date(2010, 1 - 1, 1),
maxDate:new Date(2010, 12 - 1, 31),
altField: ''#datepicker_value'',
onSelect: function(){
var day1 = $("#datepicker").datepicker(''getDate'').getDate();
var month1 = $("#datepicker").datepicker(''getDate'').getMonth() + 1;
var year1 = $("#datepicker").datepicker(''getDate'').getFullYear();
var fullDate = year1 + "-" + month1 + "-" + day1;
var str_output = "<h1><center><img src=/"/images/a" + fullDate +".png/"></center></h1><br/><br>";
$(''#page_output'').html(str_output);
}
});
});
En lugar de analizar el día, el mes y el año, puede especificar formatos de fecha directamente utilizando la función formatDate de datepicker. En mi ejemplo, estoy usando "yy-mm-dd", pero puede usar el formato que desee.
$("#datepicker").datepicker({
dateFormat: ''yy-mm-dd'',
inline: true,
minDate: new Date(2010, 1 - 1, 1),
maxDate: new Date(2010, 12 - 1, 31),
altField: ''#datepicker_value'',
onSelect: function(){
var fullDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker(''getDate''));
var str_output = "<h1><center><img src=/"/images/a" + fullDate +".png/"></center></h1><br/><br>";
$(''#page_output'').html(str_output);
}
});
Esta línea parece cuestionable:
page_output.innerHTML = str_output;
Puede usar .innerHTML dentro de jQuery, o puede usarlo sin él, pero tiene que dirigir el selector semánticamente de una manera u otra:
$(''#page_output'').innerHTML /* for jQuery */
document.getElementByID(''page_output'').innerHTML /* for standard JS */
o mejor aún
$(''#page_output'').html(str_output);
Puedes formatear la fecha de jQuery con esta línea:
moment($(elem).datepicker(''getDate'')).format("YYYY-MM-DD");
tratar
$(''#page_output'').html(str_output);