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

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% de las veces, la fecha predeterminada de hoy será lo que quieran.

Answer 1

Actualización: hay informes que ya no funcionan en Chrome.

Esto es conciso y hace el trabajo (obsoleto):

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

Esto es menos conciso, utilizando encadenamiento le permite trabajar en cromo (2019 -06-04):

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

Answer 2

Primero debe llamar a datepicker () > luego use 'setDate' para obtener la fecha actual.

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

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

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

NO funcionará solo con

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

NOTE : Los parámetros aceptables de setDate se describen aquí

Answer 3

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

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

Answer 4

El método setDate () 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, número o cadena de fecha de JavaScript:

  

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

En caso de que se lo pregunte, configure defaultDate propiedad en el constructor no actualiza el control asociado.

Answer 5

Establecer en hoy :

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

Configurado en ayer :

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

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

Consulte jQuery UI ›Métodos› setDate .

Answer 6

La solución 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 7

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 en la inicialización del selector de fecha (¡si lo ha asignado!);)

Answer 8

Este me funcionó.

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

Answer 9

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 10

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

Answer 11

Para configurar el selector de fecha en una determinada hora predeterminada (la fecha actual en mi caso) al cargar, Y luego tiene la opción de elegir otra fecha en la que 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 12

Para rellenar previamente la fecha, primero debe inicializar datepicker, luego pasar el valor del parámetro setDate.

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

Answer 13

Sólo pensé en añadir mis dos centavos. El selector se está utilizando en un formulario de agregar / actualizar, por lo que era necesario mostrar la fecha proveniente de la base de datos si se edita un registro existente, o mostrar la fecha de hoy si no. A continuación está funcionando 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 14

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) Ingrese de forma predeterminada hoy. Primero debe completar el selector de fechas.

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

Answer 15

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

Asigna la fecha bonita al control necesario.

Answer 16

Prueba esto

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

Answer 17

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

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

Answer 18

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

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