definir data no tipo de entrada data

104

<input id="datePicker" type="date" />

Vou definir a data de hoje no tipo de entrada datepicker date no cromo.

$(document).ready( function() {
    var now = new Date();
    var today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    alert(today);
    $('#datePicker').val(today);
});

mas não está funcionando

Edite este jsFiddle - Por favor, tente no Chrome.

— Remetente
fonte

2

Se você escolher uma data em seu violino e inspecionar o quadro resultado, fazendo um $('#datePicker').val();dá "2012-09-10"e isso não é o formato que você usa para definir a data

Está funcionando no cromo do meu lado .. O que exatamente você quer dizer com its not working?

— AdityaParab de

tentar { currentText: "Now" }

— :,

trabalhando em mim ... qual é o problema?

— Netorica,

1

@JigarPandya fr_FR (@ user108, consulte também stackoverflow.com/a/3496622/180100 )

158

Link Fiddle: http://jsfiddle.net/7LXPq/93/

Dois problemas nisso:

O controle de data em HTML 5 aceita no formato de ano - mês - dia, conforme usamos no SQL
Se o mês for 9, ele precisa ser definido como 09, não apenas 9. Portanto, também se aplica ao campo do dia.

Siga o link do violino para uma demonstração:

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#datePicker').val(today);

— Dhanasekar
fonte

4

Resposta pós-2012: verifique minha resposta para uma solução com suporte em uma linha de código.

— Oliv Utilo

@ OlivUtilo — claro, mas sua resposta apresentará resultados incorretos algumas vezes.

— RobG

Você economizou meu tempo cara, muito obrigado

— Dip Surani

128

document.getElementById("datePicker").valueAsDate = new Date()

Deveria trabalhar.

— int32_t
fonte

6

Esta é a melhor solução que encontrei até agora - funciona no Android 4.0.3

— Ben Clayton

6

Definitivamente parece mais limpo do que a resposta aceita ... obrigado

— Skipjack

1

Descobri que isso não funciona no Safari por algum motivo :(

— james_alvarez

Testado no Chrome e Edge e funcionou bem. Como @Skipjack disse, é incrível Resposta!

— Arun

Parece a solução correta, no entanto, no Safari (13.1.2) a chamada obtém uma exceção de estado inválido. Não tenho certeza porque ...?

— fbitterlich

23

Atualização: estou fazendo isso com date.toISOString().substr(0, 10). Dá o mesmo resultado que a resposta aceita e tem um bom suporte.

— Oliv Utilo
fonte

2

Works in safari

— james_alvarez

4

Observação: isso fornece uma data no fuso horário UTC. Em contraste, a melhor resposta usa a hora local.

— Qwertie

@Qwertie - ambos operam no mesmo Dateobjeto (criado com o novo Date ou Date.now, que herdam o fuso horário do navegador). usar toISOString ou as funções getDate (eu acho) resolverá o mesmo; então eu acho que isso deve ter o comportamento desejado ...

— Oliv Utilo

1

@ OlivUtilo — Não, eles não o fazem para o período de compensação de fuso horário do host.

— RobG

Como Qwertie diz, isso pode dar a resposta potencialmente errada se você estiver usando uma data sem hora. por exemplo, Sáb 01 de setembro de 2018 00:00:00 GMT + 0100 é convertido para "2018-08-31"

— havlock

14

var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

O código acima funcionará.

— Gourav Makhija
fonte

12

para mim, o caminho mais curto para resolver esse problema é usar moment.js e resolver esse problema em apenas 2 linhas.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

— Umair Khalid
fonte

1

sim, assim como $ ('# datePicker'). val (moment (). format ('YYYY-MM-DD'));

— Umair Khalid de

2

Para pessoas não familiarizadas com o Moment, se você deseja formatar um objeto Date Javascript arbitrário com moment (): var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);

— veuncent

4

Seu código teria funcionado se estivesse neste formato:, YYYY-MM-DDeste é o padrão de computador para formatos de data http://en.wikipedia.org/wiki/ISO_8601

— Dominic
fonte

1

Normalmente crio essas duas funções auxiliares ao usar entradas de data:

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

Você pode então definir o valor de entrada de data como:

$('#datePicker').val(dateToInput(new Date()));

E recupere o valor selecionado assim

const dateVal = inputToDate($('#datePicker').val())

— aashah7
fonte

0

O Datetimepicker sempre precisa do formato de entrada AAAA-MM-DD, não se preocupa com o formato de exibição do seu modelo ou com a data e hora do seu sistema local. Mas o formato de saída do selecionador de data e hora é o desejado (seu sistema local). Há um exemplo simples em minha postagem .

— Eda Jede
fonte

-5

Versão Jquery

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

— Krutarth Vora
fonte

4

$.datepickernão é o jQuery padrão. Você está usando um plugin e sem dizer qual, esta resposta é inútil.

— Emile Bergeron