2011-02-01 2 views
4

Я использую JQuery выбора даты плагин Кельвина Luck (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/) и нужно сделать следующее, может быть, кто-нибудь может мне помочь:Jquery Выбор даты: Выберите одну дату, автоматически обновляют второе поле

На сайте для страхования путешествий у меня есть два поля даты, один для даты начала и один для даты окончания. Также есть третье поле (выбор), которое выбирает планы, каждый с различным охватом, в течение нескольких дней. Идея заключалась бы в том, что если вы выберете план, например, 15 дней и дату начала X, второе поле даты будет заполнено магией с датой X + 15 дней.

Вещь, мое знание JavaScript не то, что вы бы назвали передовым.

У кого-нибудь есть опыт работы с плагином или, по крайней мере, дать мне несколько указателей?

Большое спасибо.

+0

Вокруг здесь, люди, как, что вы положили в некоторых усилий. Вы что-то пробовали? – switz

+1

Да, я посмотрел на несколько вещей. А именно демонстрационные страницы плагина, поиск в google и StackOverflow, документы плагина и т. Д. Но до сих пор я не нашел ничего такого. Только некоторые примеры, где вы можете определить диапазон для второго ввода, например, http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html – Contraculto

ответ

2

Может быть, это может помочь


$(document).ready(function(){  
    $("#date2").datepicker(); 
    $("#date1").datepicker({ 
     onSelect: function(){ 
      var fecha = $(this).datepicker('getDate'); 
      $("#date2").datepicker("setDate", new Date(fecha.getTime())); 
      $("#date2").datepicker("setDate", "+15d"); 
     } 
    }); 
}); 

Я думаю, это то, что вам нужно

+0

¿Этот код использует UI Datepicker, правильно? Заглядывал в решения с этим за последний час. Попробуем это, спасибо. – Contraculto

+0

Работает как очарование. Я всегда благодарен. :) – Contraculto

1

http://jqueryui.com/demos/datepicker/ onSelect может быть то, что вы ищете, когда вы выбираете первую дату можно добавить 15 дней к нему и заполнить второе поле

DatePicker вы используете старую версию, я думаю, вы должны посмотреть на jquery datepicker по ссылке выше

+0

Спасибо, я рассмотрю этот. Я просто использую этот, потому что это то, что мне нужно изменить на сайте. (Очевидно, я этого не делал) – Contraculto

1

Я модифицировал один из образцов. что-то вроде этого:

$(function() 
{ 
    $('#start-date').bind(
     'dpClosed', 
     function(e, selectedDates) 
     { 
      var d = selectedDates[0]; 
      if (d) { 
       d = new Date(d); 
       var timeframe = $('.plan-length').val(); 
       $('#end-date').dpSetStartDate(d.addDays(timeframe).asString()); 
       $('#end-date').dpSetEndDate(d.addDays(timeframe + 1).asString()); 
      } 
     } 
    );  
}); 

где #start-date является ввод даты начала, .plan-length является селектор, который будет возвращать количество дней план будет добавить (очевидно, я не знаю, реализацию, так что это, несомненно, придется изменить) , и #end-date - вход даты окончания.

EDIT: Я также очень рекомендую вам посмотреть плагин jQuery UI DatePicker, так как он намного более гибкий, и IMO проще в использовании.

EDIT 2: Вы можете установить дату начала и окончания, так что это только один выбор. Я добавил еще 1 строку в код, указанный выше.

+0

Спасибо. Это близко, но, видимо, с этим плагином вы можете установить только даты начала, а не точную. Я загляну в плагин UI. – Contraculto

+0

Вы можете установить дату начала и окончания, так что это только один выбор. Я добавил еще 1 строку в код выше. – Victor

Смежные вопросы