Como faço para preencher previamente uma caixa de texto do jQuery Datepicker com a data de hoje?

Question

Eu tenho um calendário jQuery Datepicker muito simples:

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

e claro no HTML...

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

A data de hoje é bem destacada para o usuário quando ele abre o calendário, mas como faço para que o jQuery preencha previamente a própria caixa de texto com a data de hoje no carregamento da página, sem que o usuário faça nada?99% das vezes, a data padrão de hoje será a que eles desejam.

Answer 1

ATUALIZAÇÃO: Existem relatórios que não funciona mais no Chrome.

Isso é conciso e faz o trabalho (obsoleto):

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

Isso é menos conciso, utilizando encadeamento permite que ele funcione no Chrome (2019-06-04):

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

Answer 2

Você deve PRIMEIRO chamar datepicker() > então use 'setDate' para obter a data atual.

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

OU encadeie a chamada do método setDate após a inicialização do selecionador de data, conforme observado em um comentário nesta resposta

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

Ele vai NÃO trabalhar com apenas

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

OBSERVAÇÃO : Os parâmetros setDate aceitáveis ​​são descritos aqui

Answer 3

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

parecia funcionar, mas pode haver uma maneira melhor por aí ..

Answer 4

o setDate() O método define a data e atualiza o controle associado. Aqui está como:

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

Demonstração

Como mencionado na documentação, setDate() Felizmente aceita o objeto, número ou string do JavaScript:

A nova data pode ser um objeto de data ou uma string no formato de data atual (por exemplo, '01/26/2009 '), vários dias a partir de hoje (por exemplo, +7) ou uma sequência de valores e períodos (' y 'para anos, 'm' por meses, 'w' por semanas, 'd' por dias, por exemplo, +1m +7d ') ou nulo para limpar a data selecionada.

Caso você esteja se perguntando, configurando defaultDate propriedade no construtor não atualize o controle associado.

Answer 5

Definido como hoje:

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

Definido como ontem:

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

E assim por diante com vários dias antes da ou depois data de hoje.

Ver JQuery UI ›Métodos› SetDate.

Answer 6

A solução é:

$(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);
});

Obrigado Grayghost!

Answer 7

Este código garantirá usar o formato do seu datepicker:

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

Não há necessidade de reaplicar o formato, ele usa o datepicker predefinido-um por você na inicialização do DatePicker (se você o atribuiu!););)

Answer 8

Este funcionou para mim.

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

Answer 9

O código de David K ​​Egghead funcionou perfeitamente, obrigado!

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

Também consegui aparar um pouco e também funcionou:

$(".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 definir o DatePicker como um certo horário padrão (a data atual do meu caso) sobre o carregamento e, em seguida, ter a opção de escolher outra data em que a sintaxe é:

    $(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 pré-preencher a data, primeiro você precisa inicializar o DatePicker e depois passar o valor do parâmetro setDate.

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

Answer 13

Apenas pensei em adicionar meus dois centavos. O seletor está sendo usado em um formulário de adição/atualização, por isso precisava mostrar a data proveniente do banco de dados se editar um registro existente ou mostrar a data de hoje, se não. Abaixo está funcionando bem para mim:

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

Answer 14

Você tem 2 opções:

OPÇÃO A) Marca como "ativo" no seu calendário, somente quando você clica na 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;
        }​

OPÇÃO B) Entrada por padrão com hoje.Você deve preencher primeiro o datepicker .

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

Answer 15

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

Atribua o PrettyDate ao controle necessário.

Answer 16

Tente isso

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

Answer 17

Isso funciona melhor para mim, pois às vezes tenho problemas chamando .datepicker('setDate', new Date()); Como isso mexer, se eu tiver o datepicker já configurado com parâmetros.

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

Answer 18

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

Fonte: http://www.kelvinluck.com/assets/jquery/datepicker/v2/demo/datepickerdefaulttoday.html