There is a certain form in which the payment period is chosen, it can take values ​​from 1 to 24 - this is the number of months.

there is also a datepicker field in which the activation date is selected

and there is a "End of Period" field - in which the activation date + payment period should be calculated.

$('#ID_DATE').datepicker({ dateFormat: 'dd.mm.yy', minDate: 0, }).change(function(){ var period_date = $('#period_id').val(); var d = new Date(); period_date = 30*period_date; d.setDate($(this).datepicker('getDate').getDate()+period_date); // вот так пытаюсь сделать, но без результата $('#ID_PAYMENT_PERIOD_END').val(d); });
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

I really did not understand in what format your activation date is chosen. But if not at all, you can try this:

 <html> <head> <title>Тест</title> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('#btnscl').click(function() { var period = jQuery('#period_select option:selected').text(); var den = jQuery('#data_start_den').val(); var mes = jQuery('#data_start_mes').val(); var god = jQuery('#data_start_god').val(); if ((parseInt(mes) + parseInt(period)) > 12) { ++god; mes = (parseInt(mes) + parseInt(period)) - 12; } else { mes = (parseInt(mes) + parseInt(period)); } var itog = den + '.' + mes + '.' + god; jQuery("#finish_period").html(itog); }) }) </script> </head> <body> Выберите период оплаты: <br> <select id="period_select"> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select> <br> <br>Введите дату активации: <br> <pre> День: <input type="text" placeholder="15" id="data_start_den"> Месяц: <input type="text" placeholder="06" id="data_start_mes"> Год: <input type="text" placeholder="2016" id="data_start_god"> </pre> <br> <button id="btnscl">Подсчитать</button> <br> <br>Итого: <div id="finish_period"></div> </body> </html>

PS Code sketched in a hurry, so please do not swear much. If you want to use it, I advise you to put a check on the number of days, months, etc.

  • almost, only the date is selected in the datepicker. And the month should be in the format 01.02 ..., 10, 11.12 - Viktor

I would do this: https://jsfiddle.net/5hy10s0c/

 $(function() { $('.period_start').datepicker({ dateFormat: 'dd.mm.yy', onSelect: function(dateText, instance) { var period_end = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings); period_end.setMonth(period_end.getMonth('dd.mm.yy') + 6); //на примере "плюс 6 месяцев", можно заменить это число переменной $('.period_end').val(period_end.toLocaleFormat('%d.%m.%y')); } }); });

for fields

 <input type="text" class="period_start"> <input type="text" class="period_end">
  • uh ... nothing except datapicor works for you at all) - Viktor
  • This is a description of the work with the date, disassembled by the example of "plus 6 months", if you carefully read the comment. Your problem, as I understand it, was the difficulty of adding months to the selected date. Or did you have to do all the work for you? - alenkins
  • you do not fill out the period_end joxi.ru/8AnxgZ4sq8aOem field - Viktor
  • because you have Google Chrome, which does not know how toLocaleFormat() . You can work with the date by other standard methods or add to silly browsers the semblance of support for jsfiddle.net/5hy10s0c/1 - alenkins

the end date is calculated, both when choosing a date in the calendar, and when changing a period, there is also a calendar preset for the current date and a period of 30 days, see the example below.

 var $sel = $("#period_id"), $picker = $("#ID_DATE"), $end = $("#ID_PAYMENT_PERIOD_END") function selected() { var selectedDate = $picker.val(); var period_date = (+$sel.val() || 1) * 30, instance = $picker.data("datepicker"), date = $.datepicker.parseDate("dd.mm.yy", selectedDate, instance.settings); date.setDate(date.getDate() + period_date); date = $.datepicker.formatDate("dd.mm.yy", date, instance.settings); $end.val(date) } $picker.datepicker({ showOn: "button", buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", buttonImageOnly: true, buttonText: "Дата активации", dateFormat: "dd.mm.yy", minDate: 0, onClose: selected }).datepicker("setDate", new Date); $sel.on("change", selected).change(); 

 $(function() { $.datepicker.regional['ru'] = { closeText: 'Закрыть', prevText: '&#x3c;Пред', nextText: 'След&#x3e;', currentText: 'Сегодня', monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'], dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'], dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'], dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], dateFormat: 'dd.mm.yy', firstDay: 1, isRTL: false, showOtherMonths: true, selectOtherMonths: true, changeMonth: true, changeYear: false, showAnim: 'scale' }; $.datepicker.setDefaults($.datepicker.regional["ru"]); var $sel = $("#period_id"), $picker = $("#ID_DATE"), $end = $("#ID_PAYMENT_PERIOD_END"); function selected() { var selectedDate = $picker.val(); var period_date = (+$sel.val() || 1) * 30, instance = $picker.data("datepicker"), date = $.datepicker.parseDate("dd.mm.yy", selectedDate, instance.settings); date.setDate(date.getDate() + period_date); date = $.datepicker.formatDate("dd.mm.yy", date, instance.settings); $end.val(date) } $picker.datepicker({ showOn: "button", buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", buttonImageOnly: true, buttonText: "Дата активации", dateFormat: "dd.mm.yy", minDate: 0, onClose: selected }).datepicker("setDate", new Date); $sel.on("change", selected).change(); }); 
 body { font-size: 12px; } .active .ui-state-default { background: rgba(102, 255, 102, 1) } .active:hover .ui-state-default { background: rgba(255, 255, 0, 1) } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" /> <label>Дата активации : <input id='ID_DATE'> </label> <br> <label> <input id='ID_PAYMENT_PERIOD_END'>Окончание периода</label> <br> <label>Период оплаты <select id="period_id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> </select> </label>

  • if you choose 12/31/2016 and the payment period is 24, then you have the result 12/21/2018, which is not true - Viktor
  • @ Victor the result is period_date = 30*period_date; according to your data period_date = 30*period_date; if months are needed real months then add and not days, see the answer @alenkins - roni