Erro ao criar um link '' (data) para jQueryUI datepicker usando setDate
-
22-07-2019 - |
Pergunta
Eu estou tentando anexar "
HTML relevante:
<form id="dateForm">
<a href="" id="previous">« Previous</a>
<input name="datepicker" type="text" value="10/30/2009" id="datepicker" />
<a href="" id="next">Next »</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]);
});
};
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.