Como preenche previamente uma caixa de texto do jQuery Datepicker com a data de hoje?


238

Eu tenho um calendário muito simples do jQuery Datepicker:

$(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 caixa de texto com a data de hoje no carregamento da página, sem que o usuário faça alguma coisa? 99% das vezes, o padrão da data de hoje será o que eles desejam.


7
A resposta mais popular é melhor que a resposta aceita. é melhor mudar a resposta aceita.
ahmadali Shafiee


1
@ahmadalishafiee (e todos os outros). A solução atualmente aceita foi aceita em 07/05/2015.
31418 Teepeemm

Respostas:


569

Atualização: há relatórios de que isso não funciona mais no Chrome.

Isso é conciso e faz o trabalho (obsoleto):

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

Isso é menos conciso, a utilização do encadeamento permite que ele funcione no chrome (2019-06-04):

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

3
Esta solução é elegante
ocultada

2
Este é o que realmente funcionou para mim e não a solução aceita. Obrigado
Mehdiway

7
Isso não vai funcionar, primeiro você deve chamar $ (". Date-pick"). Datepicker (); e então $ (". data-pick"). datepicker ('setDate', new Date ());
Misha Akopov

9
Não funciona mais no Chrome após atualização recente do navegador
Max Flex

3
Trabalho. Estou definindo $(".date-pick").datepicker().datepicker('setDate', new Date()); tho
seebiscuit

221

Você deve PRIMEIRO chamar datepicker ()> e usar '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 datepicker, conforme observado em um comentário nesta resposta

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

Vai NÃO trabalhar com apenas

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

NOTA : Os parâmetros setDate aceitáveis ​​são descritos aqui


3
Usando o jQueryUI 1.8, achei esta solução a única maneira (sã) de fazer isso.
Brianz 6/12/12

13
$ (". seletor"). datepicker (). datepicker ("setDate", nova data ()); funcionará e não fará com que o jQuery pesquise o DOM duas vezes.
Abc123

1
Ótima resposta aceita diz apenas $ (". Data-pick"). Datepicker ("setDate", new Date ()); e não funciona sem a primeira chamada $ (". data-pick"). datepicker (); sua resposta é muito melhor
Misha Akopov

72
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 lá fora ..


Isso funciona muito bem, exceto por duas coisas: 1) Eu esperava usar o método jQuery para obter a data atual, mas talvez isso não importe. 2) esta solução produz um valor exatamente um mês antes da data de hoje!
Marcus

2
OH - você está certo! confira - w3schools.com/jsref/jsref_obj_date.asp - o mês é de 0 a 11 - você precisará adicionar 1 .. curiosamente, getDate é de 1 a 31, mas getMonth é de 0 a 11 ..
lucas,

3
Existe uma maneira mais fácil .. veja meu post abaixo.
Ravi Ram

Esta solução permite mostrar o texto diretamente e definir a data simultaneamente, enquanto a solução do CiscoIPPhone precisa de outra etapa para mostrar o valor sem abrir o selecionador.
Afshar Mohebbi

4
Para setDatevocê também pode usar a notação relativa usual de datepicker, por exemplo, para obter o dia seguinte, basta digitar .datepicker('setDate', '+1d').
kosii

59

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

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

Demo

Conforme mencionado na documentação, setDate()aceita com satisfação o objeto Data, número ou uma string do JavaScript:

A nova data pode ser um objeto Data ou uma sequência no formato de data atual (por exemplo, '01 / 26/2009 '), alguns 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, a configuração de defaultDatepropriedade no construtor não atualiza o controle associado.


1
Por que está na sua demonstração? Quando copio esse código no meu site, a caixa de diálogo continua aparecendo quando a página é carregada.
chobo2

1
Isso funcionou para mim - a resposta aceita e outras opções acima não.
lydiat

Esta é uma solução muito, muito melhor do que qualquer uma das opções acima.
Adamj

A melhor resposta para esta pergunta no momento, embora eu precisasse que o formato da data fosse "mm-dd-aa" para corresponder ao seletor de datas.
precisa saber é o seguinte

26

Defina como hoje :

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

Definido para ontem :

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

E assim por diante, com qualquer número de dias antes ou depois da data de hoje .

Consulte jQuery UI ›Métodos› setDate .


1
Grande, como os outros, você deve ter chamado datepicker () uma vez já tão,$(".date-pick").datepicker("setDate", '+0');
jwbensley

Isso também funcionou como eu desejava, pois meu dateFormat precisa corresponder ao formato de data do MySQL (aa-mm-dd). Este setDate adiciona preenchimento zero ao mês e dia.
jjohn

9

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!


7

Este funcionou para mim.

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

6

Este código garantirá o uso do 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 tiver atribuído!);)


5

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

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

Também consegui apará-lo um pouco e também funcionou:

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

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

2

Para definir o selecionador de data para um determinado horário padrão (a data atual no meu caso) no carregamento, e depois ter a opção de escolher outra data, 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 
        });
  });

esta solução funcionou para mim em cromo, outros listados aqui não
Mike Volmar

2

Para preencher previamente a data, primeiro você precisa inicializar o datepicker e depois passar o valor do parâmetro setDate.

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

1

Só pensei em adicionar meus dois centavos. O seletor está sendo usado em um formulário de adição / atualização, portanto, é necessário mostrar a data proveniente do banco de dados se estiver editando um registro existente ou mostrar a data de hoje, se não estiver. 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; ?>
  });

1

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", nova data ());

1
opção A é bom porque selecionador de data pode permanecer em branco até que uma data é para ser selecionado altura em que o padrão é a data atual
waxingsatirical

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

Atribua o prettyDate ao controle necessário.


0

Tente isto

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

0

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

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

0

Usa isto:

$(".datepicker").datepicker({ dateFormat: 'dd-M-yy' }).datepicker('setDate', new Date());

Para obter a data no formato Por exemplo: 10 de outubro de 2019, que será mais compreensível para os usuários.


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

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


Meu navegador não reconheceu a função asString (). Eu fiz assim: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone

1
Eu acho que asString () deve ser toString ().
rg88

1
O DatePicker de Kevin Luck e o DatePicker da interface do usuário do Jquery são dois datepickers muito diferentes.
Craig Hooghiem 30/07/2010

@gamerzfuse O datepicker da jQuery UI é baseado no de Kevin Luck.
Mathias Bynens
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.