Deshabilitar fecha en DataPicker

arlen89 · #1 (**permalink**) 10/04/2012, 09:46

Hola a todos, necesito su ayuda. Tengo un calendario en datepicker que permite al usuario seleccionar una fecha pero me hace falta deshabilitar los días posteriores al actual en cuanto a día, mes y año. Ejemplo de esto es que si hoy es 10-04-2012 a partir de ese día todos los días, meses y años posteriores esten deshabilitados y así sucesivamente al pasar los días.
Muchas gracias, Su ayuda es imprescindible para mi

. Gracias….

Naahuel · #2 (**permalink**) 10/04/2012, 12:38

1.- Es Inhabilitar :P

2.- .datepicker() tiene la opción maxDate: http://jqueryui.com/demos/datepicker/#option-maxDate

Sería así:

Código Javascript:

Ver original$( ".selector" ).datepicker({ maxDate: '+0d' });

Es decir, 0 días hacia adelante a partir de hoy. Tené en cuenta que esta fecha es obtenida de la computadora del cliente y puede estar mal.

Ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $( "input" ).datepicker({ maxDate: '+0d' });
        });
    </script>
    <title></title>
</head>
<body>
    <input />
</body>
</html>

arlen89 · #3 (**permalink**) 10/04/2012, 14:44

Gracias por tu respuesta, pero tengo pocos conocimientos de javascript y jquey y probé lo que me mandaste de todas las formas posibles y no me salió, pudieras decirme a que te refieres con (".selector") y cuando pusiste el código en html ("input"), he probado así, poniendo el id del input, etc. Espero tu respuesta y muchas gracias.

Naahuel · #4 (**permalink**) 10/04/2012, 19:14

A ver, posteá tu código. El selector que va ahí es un selector jQuery (o CSS). Por ejemplo, si el id de tu input que funciona como fecha es "fecha", tu código sería así:

Código HTML:

Ver original<script type="text/javascript">
        $(function(){
            $( "#fecha" ).datepicker({ maxDate: '+0d' });
        });
    </script>

arlen89 · #5 (**permalink**) 10/04/2012, 21:27

Mira ya así lo había probado, de todas formas lo volví hacer y nada no me funciona, puedo seguir seleccionando las fechas posteriores a la actual.
Aquí te mando el código para que lo veas. La aplicación la estoy haciendo en Joomla 1.7 por eso es que la llamada a los script y css se hacen de esta manera.

<?php

defined('_JEXEC') or die;

JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');

jimport('joomla.utilities.date');

$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base().'components/com_moneda/calendario/themes/base/jquery.ui.all.css');
$document->addScript(JURI::base().'components/com_moneda/calendario/jquery-1.6.2.js');
$document->addScript(JURI::base().'components/com_moneda/calendario/ui/jquery.ui.core.js');
$document->addScript(JURI::base().'components/com_moneda/calendario/ui/jquery.ui.widget.js');
$document->addScript(JURI::base().'components/com_moneda/calendario/ui/jquery.ui.datepicker.js');
$document->addStyleSheet(JURI::base().'components/com_moneda/calendario/demos.css');

<script type="text/javascript">

$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
});

$(function(){
$( "#datepicker" ).datepicker({ maxDate: '+0d' });
});

</script>
<form action="<?php echo JRoute::_('index.php?option=com_moneda&layout=edit &id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="fecha-form" class="form-validate">
<div class="width-60 fltlft">
<fieldset class="adminform">
<legend><?php echo JText::_('COM_MONEDA_LEGEND_FECHA'); ?></legend>
<ul class="adminformlist">
<li>
<label name="fecha">Fecha</label>
<input type="text" name="fecha" id="datepicker" size="20" />
</li>

</ul>
<input style="margin-top:30px; margin-left:-280px;" class="guardarFecha" type="submit" name="guardarFecha" value="<?php echo JText::_( 'COM_MONEDA_BOTON_GUARDAR' );?>"/>
</fieldset>
</div>
<input type="hidden" name="task" value="fecha.guardarFecha" />
<?php echo JHtml::_('form.token'); ?>
<div class="clr"></div>
</form>

Mira a lo mejor el problema es en el script jquery.ui.datepicker.js que tiene una pila de funciones que yo ni entiendo, no te lo mando porque es demasiado largo, a lo mejor tu la tienes, lo ideal sería que lo vieras.

Bueno mira a ver si me puedes ayudar, muchas gracias y disculpa por las molestias.

Naahuel · #6 (**permalink**) 11/04/2012, 04:49

Pero... lo has puesto dos veces? Pusiste esto:

Código Javascript:

Ver original$(function() { 
    $( "#datepicker" ).datepicker({
        showButtonPanel: true
    }); 
});
 
$(function(){
    $( "#datepicker" ).datepicker({ maxDate: '+0d' });
});

Combiná los dos de esta forma:

Código Javascript:

Ver original$(function(){
    $( "#datepicker" ).datepicker({ 
        showButtonPanel: true,
        maxDate: '+0d' 
    });
});

La forma de usar jQuery es: Selecciono algo --> hago algo.

1°.- Seleccionamos el document y decimos que cuando esté listo (ready) realizaremos una serie de acciones:

Código Javascript:

Ver original$(document).ready(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
});

Yo en los ejemplos que te pasé lo he abreviado así:

Código Javascript:

Ver original$(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
});

Lo cual en las últimas versiones de jQuery es exactamente lo mismo que lo anterior.

2°.- Seleccionamos el objeto que queremos que realice alguna acción o sobre el cual queremos aplicar un plugin. En tu caso, un input con id #datepicker. La cadena "#datepicker" sería el selector.

Código Javascript:

Ver original$(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
    $("#datepicker")
});

3°.- Sobre ese elemento aplicamos la acción o plugin.

Código Javascript:

Ver original$(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
    $("#datepicker").datepicker();
});

4°.- La mayoría de los plugins tienen opciones, las cuales las ponemos en forma de objeto. Entre {} y separados por comas:

Código Javascript:

Ver original$(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
    $("#datepicker").datepicker({opcion1: 'valor1', opcion2: 'valor2'});
});

En tu caso, y ordenando un poco para mayor legibilidad:

Código Javascript:

Ver original$(function(){
    // Acá hago un montón de cosas cuando el DOM termine de cargar
    $( "#datepicker" ).datepicker({ 
        showButtonPanel: true,
        maxDate: '+0d' 
    });
});

arlen89 · #7 (**permalink**) 11/04/2012, 12:05

AL FINNNNN!!!!!!!

. Ya me salió perfecto, estoy super felizzzz

, quedó justo como yo lo quería y todo gracias a ti, que sin tu explicación no lo hubiera logrado, de vedad MUCHAS GRACIASSSS, por todo, por haberte tomado el tiempo de responderme, por las molestias que te pude ocasionar y principalmente por la maravillosa clase de jquery que me diste

. Muchas gracias de todo corazón.

Naahuel · #8 (**permalink**) 11/04/2012, 12:51

De nada amigo :)