javascript - noweekends - ¿Cómo relleno previamente un cuadro de texto jQuery Datepicker con la fecha de hoy?

jquery ui only datepicker

Question

Tengo un calendario jQuery Datepicker muy simple:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

y por supuesto en el HTML ...

<input type="text" size="10" value="" id="date_pretty"/>

La fecha de hoy está bien resaltada para el usuario cuando abre el calendario, pero ¿cómo puedo hacer que jQuery rellene previamente el cuadro de texto con la fecha de hoy en la página cargada, sin que el usuario haga nada? El 99% del tiempo, la fecha predeterminada de hoy será lo que ellos quieran.

Answer 1

Debe FIRST llamar a datepicker ()> luego usar ''setDate'' para obtener la fecha actual.

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

O encadene la llamada al método setDate después de la inicialización del selector de fecha, como se indica en un comentario sobre esta respuesta

$(''.date-pick'').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

NO funcionará con solo

$(".date-pick").datepicker("setDate", new Date());

NOTA : Los parámetros setDate aceptables se describen here

Answer 2

El código de David K ​​Egghead funcionó perfectamente, ¡gracias!

$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date()); 

También logré recortarlo un poco y también funcionó:

$(".date-pick").datepicker().datepicker("setDate", new Date()); 

Answer 3

El método here establece la fecha y actualiza el control asociado. Aquí es cómo:

$("#datepicker1").datepicker({
    dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");

Demo

Como se menciona en la documentación, setDate() acepta felizmente el objeto de fecha de JavaScript, el número o una cadena:

La nueva fecha puede ser un objeto de Fecha o una cadena en el formato de fecha actual (por ejemplo, ''01 / 26/2009 ''), un número de días a partir de hoy (por ejemplo, +7) o una cadena de valores y períodos ('' y ''para años, ''m'' por meses, ''w'' por semanas, ''d'' por días, por ejemplo ''+ 1m + 7d''), o nulo para borrar la fecha seleccionada.

En caso de que se lo pregunte, la configuración de la propiedad defaultDate en el constructor no actualiza el control asociado.

Answer 4

Establecer a hoy :

$(''#date_pretty'').datepicker(''setDate'', ''+0'');

Ayer :

$(''#date_pretty'').datepicker(''setDate'', ''-1'');

Y así sucesivamente con cualquier número de días antes o después de la fecha de hoy .

Ver jQuery UI ›Métodos› setDate .

Answer 5

Este código le asegurará utilizar el formato de su selector de fechas:

$(''#date-selector'').datepicker(''setDate'', new Date());

No es necesario volver a aplicar el formato, usa el selector de fecha predefinido, uno por usted en la inicialización del selector de fecha (¡si lo ha asignado!);)

Answer 6

Este funcionó para mí.

$(''#inputName'')
  .datepicker()
  .datepicker(''setDate'', new Date());

Answer 7

Esto me funciona mejor, ya que a veces tengo problemas para llamar a .datepicker(''setDate'', new Date()); ya que ensucia si si tengo el selector de fecha ya configurado con parámetros.

$("#myDateText").val(moment(new Date()).format(''DD/MM/YYYY''));

Answer 8

La solucion es:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
    var myDate = new Date();
    var month = myDate.getMonth() + 1;
    var prettyDate = month + ''/'' + myDate.getDate() + ''/'' + myDate.getFullYear();
    $("#date_pretty").val(prettyDate);
});

Gracias Grayghost!

Answer 9

Para configurar el selector de fecha en una determinada hora predeterminada (la fecha actual en mi caso) en la carga, Y luego tener la opción de elegir otra fecha, la sintaxis es:

    $(function() { 
        // initialize the datapicker
        $("#date").datepicker();

        // set the time
        var currentDate = new Date();
        $("#date").datepicker("setDate",currentDate);

    //  set the options for the button  
        $("#date").datepicker("option",{
            dateFormat: ''dd/mm'',
            showOn: "button",
          // whatever option Or event you want 
        });
  });

Answer 10

Para rellenar previamente la fecha, primero debe inicializar el selector de fechas y luego pasar el valor del parámetro setDate.

$("#date_pretty").datepicker().datepicker("setDate", new Date());

Answer 11

Prueba esto

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();

Answer 12

Solo pensé en añadir mis dos centavos. El selector se está utilizando en un formulario de agregar / actualizar, por lo que necesitaba mostrar la fecha que viene de la base de datos si está editando un registro existente, o mostrar la fecha de hoy, si no. A continuación está trabajando bien para mí:

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT[''start_ts''])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker(''setDate'', new Date());   
    <?php endif; ?>
  });

Answer 13

Tienes 2 opciones:

OPCIÓN A) Marca como "activa" en su calendario, solo cuando hace clic en la entrada.

Js :

$(''input.datepicker'').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker(''setDate'', new Date());
                            }
                        }                         
                     );

Css :

div.ui-datepicker table.ui-datepicker-calendar .ui-state-active,
        div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active  {
            background: #1ABC9C;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            width: 24px; height: 24px;
        }​

OPCIÓN B) Entrada por defecto con el día de hoy. Tienes que rellenar primero el selector de fechas.

$("input.datepicker").datepicker().datepicker("setDate", new Date());

Answer 14

Actualización: hay informes de que esto ya no funciona en Chrome.

Esto es conciso y hace el trabajo:

$(".date-pick").datepicker(''setDate'', new Date());

Answer 15

$(''input[name*="date"]'').datepicker({
        dateFormat: ''dd-mm-yy'',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker(''setDate'', new Date());
        }
    });

Answer 16

$(function()
{
$(''.date-pick'').datePicker().val(new Date().asString()).trigger(''change'');
});

Fuente: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

Answer 17

var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + ''/'' + myDate.getDate() + ''/'' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

Parecía funcionar, pero podría haber una mejor manera de salir ...

Answer 18

var prettyDate = $.datepicker.formatDate(''dd-M-yy'', new Date());
alert(prettyDate);

Asigna la fecha bonita al control necesario.