Pergunta

Eu estou tentando anexar " e "Next>" links para um controle datepicker jQueryUI. Meu problema é que ele irá adicionar corretamente 1 dia, mas, em seguida, parar. Não vai continuar adicionando dias. (Mesmo com o botão anterior). Então, se eu entrar 10/30/2009 ela só vai "next" para 10/31/2009, e não vai rolar a novembro 1. Alguma idéia? Aqui está o meu código simplificado:

HTML relevante:

<form id="dateForm">
<a href="" id="previous">&laquo; Previous</a>
<input name="datepicker" type="text" value="10/30/2009" id="datepicker" />
<a href="" id="next">Next &raquo;</a>

Relevante Javascript / jQueryUI:

// Datepicker Init
$("#datepicker").datepicker({showOn: 'button', buttonText: 'Click to choose date'}).change(function () {
    refreshSchedule();
});

// Next Day Link
$('a#next').click(function () {
    $("#datepicker").datepicker('setDate', '+1');
    refreshSchedule();
    return false;
});

// Previous Day Link
$('a#previous').click(function () {
    $("#datepicker").datepicker('setDate', '-1');
    refreshSchedule();
    return false;
});

O datepicker jQueryUI funciona corretamente contrário.

Atualização per comentário - O refreshCalendar () função poderia ter sido chamado doSomething (); É irrelevante para a pergunta original sobre como incremento / deincrement campo #datepicker. Dito isto, aqui está o código. Eu poderia ter feito a mesma coisa com um $ ( "# datepicker"). Mudança () ouvinte e uma função de retorno de chamada para atualizar a tabela / título.

// Get the latest calendar data from server. Update the calendar title & table
// returns a json array: data[0] = title, data[1] = html table contents
refreshCalendar = function () {
    var selectedDate = $("#datepicker").val();
    $.getJSON(serverUrl, {targetDate: selectedDate}, function (data) {
        $("#calendarTitle").html(data[0]);
        $("#calendarTable").html(data[1]);
    });
};
Foi útil?

Solução

Como os médicos dizem para o setDate datepicker permite fornecer uma string de um número de dias a partir de hoje. Assim que os meios $ () datepicker ( 'setDate', '-1').; Sempre igual a data de hoje - um dia, você pode chamar que 12 vezes seguidas e sempre será igual a mesma coisa (a menos que você começar às 11:59 pm em um dia e acabamento 12:01 am a próxima)

http://jqueryui.com/demos/datepicker/#method-setDate

O que eu acho que você quer é o seguinte:

// Next Day Link
$('a#next').click(function () {
    var $picker = $("#datepicker");
    var date=new Date($picker.datepicker('getDate'));
    date.setDate(date.getDate()+1);
    $picker.datepicker('setDate', date);
    return false;
});

// Previous Day Link
$('a#previous').click(function () {
    var $picker = $("#datepicker");
    var date=new Date($picker.datepicker('getDate'));
    date.setDate(date.getDate()-1);
    $picker.datepicker('setDate', date);
    return false;
});

Outras dicas

Eu também me deparei com este recentemente e necessário para modificar a saída ligeiramente - Aqui está a minha jsFiddle. Note-se que no clique de botão quando usado como este;

 <button class="prev-day">Previous</button>

Será que atualizar a página que pode utilizar recursos do servidor muito. Para evitar isso, você pode usar

  <button type="button" class="prev-day">Previous</button>

e se você precisar, você pode atualizar outras funções / dados relacionados usando a chamada de AJAX.

http://jsfiddle.net/uh26x030/1

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top