O jQuery datepicker define a data selecionada em tempo real


121

Como posso alterar dinamicamente a data selecionada do seletor de datas jquery dinamicamente? Eu disse que criou um selecionador de data em linha. Depois de algum tempo, quero refletir uma data diferente lá sem recriar o selecionador de datas do zero.

Eu tentei o método setDate, mas não funcionou e não há muita documentação no documento .

Há outro plug-in (estendido?) Aqui , mas quero usar o plug-in fornecido com o jquery.ui.all.js.

Respostas:


187

Qual versão do jQuery-UI você está usando? Eu testei o seguinte com 1.6r6, 1.7 e 1.7.1 e funciona:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
use defaultDate em vez de setDate, se setDate não funcionar.
precisa saber é o seguinte

8
mas para mim não funcionou de qualquer maneira. a data foi alterada. mas a data selecionada não aparece no calendário. isso me mostra apenas hoje destacado.
Prageeth godage 30/10/2013

28

Verifique se a data que você está tentando configurá-la está dentro do período permitido, se as opções minDate ou maxDate estiverem definidas.


10

Este exemplo mostra como usar o valor padrão no calendário suspenso e o valor na caixa de texto. Também mostra como definir o valor padrão para a data anterior.

selectedDate é outra variável que mantém a data selecionada atual do controle de calendário

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

Observou que no DatePicker de Keith Wood ( http://keith-wood.name/datepickRef.html ) as seguintes obras - observe que a configuração da data padrão é a última:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

Por alguma razão, em alguns casos, não consegui fazer o setDate funcionar.

Uma solução alternativa encontrada foi simplesmente atualizar o atributo value da entrada especificada. É claro que o próprio datepicker não será atualizado, mas se você apenas exibir a data, ele funcionará bem.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
Há um desligado por um por meses, então você precisa (date.getMonth () + 1) #
Adam Adam

1
setDate não funciona se estiver definida nas opções iniciais, tive cadeia-lo depois com .datepicker ( 'setDate', ...)
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

finalmente, o que eu procuro nas últimas horas! Preciso iniciar alterações, não apenas a data de configuração no campo de texto!


2
Deve ser .datepicker()não.datePicker()
Arslan Tabassum

3

Este é um tópico antigo, mas eu só quero dar algumas informações de como eu usei. Se você deseja definir a data de hoje, basta aplicá-la como abaixo.

 $("#datepickerid").datepicker("setDate", "0");

Se você deseja definir alguns dias antes / depois da data atual, use o -/+símbolo de quantos dias deseja abaixo.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate apenas parece ser um problema com um datepicker embutido usado na interface do usuário do jquery, o erro específico é InternalError: muita recursão.


2

Isso funciona para mim:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

No HTML, você pode adicionar seu campo de entrada com um seletor de datas como este

<input class="form-control date-picker fromDates" id="myDate" type="text">

e, em seguida, no script java, inicialize seu datepicker e defina seu valor para a data como esta,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Aqui, o atributo fromdate mostra as datas anteriores da data atual)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

As respostas somente de código são desencorajadas no Stack Overflow porque não explicam como isso resolve o problema. Edite sua resposta para explicar o que o código faz e como ele responde à pergunta, para que seja útil para outros usuários e também para o OP.
FluffyKitten

-1

Eu tive muitos problemas com o método setDate também. parece funcionar apenas na v1. O que parece funcionar, no entanto, é usar o método dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

boa sorte!


-1

ou você pode simplesmente ter

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
Deve ser .datepicker()não .datePicker().
Florin Frătică
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.