Как автоматически заполнять поле даты, в зависимости от выбранного input radio?

Question

[BuBux]

Есть два блока, с input radio и полем для выбора даты со временем(datetimepicker).

<div class="form-group">
    <label>Приоритет выполнения</label>
        <div style="margin-top: 7px;">
	    <?php if (is_array($priorities)): ?>
	        <?php foreach ($priorities as $k=>$priority): ?>
		    <div class="radio radio-<?php echo $priority['CLASS']; ?> radio-inline">
                        <input type="radio" name="priority" id="radio<?php echo $priority['ID']; ?>" value="<?=$priority['ID']?>" <?php if ($priority['NAME'] == 'Низкий') echo 'checked'?>>
                        <label for="radio<?php echo $priority['ID']; ?>"><?php echo $priority['NAME']; ?></label>
                    </div>
		<?php endforeach; ?>
            <?php endif; ?>
        </div>
</div>
<div class="form-group">
    <div class="input-group date" id="datetimepicker6">
        <span class="input-group-addon datepickerbutton">
	    <span class="glyphicon glyphicon-calendar"></span>
	</span>
	<input type="text" class="form-control"/>
	<span class="input-group-addon">
	    <span class="glyphicon glyphicon-remove"></span>
	</span>
    </div>
</div>

Файл js для календаря:

$(function () {
    $('#datetimepicker6').datetimepicker({
        locale: 'ru'
    });
    $('.glyphicon-remove').click(function () {
        $('#datetimepicker6').data("DateTimePicker").clear();
    });
});

Скрин:

В блоке с input radio в цикле я отображаю приоритеты выполнения задачи. Там есть значение дней, оно хранится в днях. Нужно чтобы при выборе приоритета, в поле с датой автоматически проставлялось значения(текущая дата-время + значение дней). Как только страница прогружена, по умолчанию выбран input radio с названием "Низкий"(это +10 дней). Следовательно в поле даты уже должна быть выбрана конкретная дата. Количество дней у меня хранится в $priority['DAYS'], где его указывать лучше я не знаю. В value указано id, для последующей обработки в php. Так же должна быть возможность сменить дату, после выбранного приоритета.

Comments

[FeST1VaL]

Ну берете засовываете значение + дней в атрибуты радио кнопок и при нажатии считываете кол-во дней. Добавляете к текущей дате и вставляете в инпут с датой... в чем проблема?

[BuBux]

Артем Будин, проблема в том, что с js только начинаю знакомится. А данную задачу нужно решить как можно быстрее. Поэтому был бы не против более развернутого ответа-решения.

Answer 1

[Александр Черемхин]

Общий подход

<input type="radio" name= "priority" id="radio1" value="1"/> Высокий   <!-- дней 1-->
<br/>
<input type="radio" name= "priority" id="radio2" value="10"/> Низкий    <!-- дней 10-->
<br/>
<input type="text" name="date" id="date"/>

обработчик события changeдля input[type=radio]

$('input[type=radio]').on('change', function (e) { 
  const count = parseInt(e.target.value); // получить кол-во дней
  const date = new Date();
  date.setDate(date.getDate() + count); // добавляем к текущей дате дни
  $('#date').val(date.toISOString())
})

Comments

[BuBux]

<div style="margin-top: 7px;">
    <?php if (is_array($priorities)): ?>
        <?php foreach ($priorities as $k=>$priority): ?>
	    <div class="radio radio-<?php echo $priority['CLASS']; ?> radio-inline" onchange="autoInsertDate()">
                <input type="radio" name="priority" id="radio<?php echo $priority['ID']; ?>" value="<?=$priority['ID']?>, <?=$priority['DAYS']?>" <?= isset($saved_priority) && $saved_priority==$priority['ID'] ? 'checked="checked"':'' ?>>
                <label for="radio<?php echo $priority['ID']; ?>"><?php echo $priority['NAME']; ?></label>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<div class="input-group date" id="datetimepicker6">
    <span class="input-group-addon datepickerbutton">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
    <input type="text" class="form-control" name="data" id="da" value="<?=$saved_data?>" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-remove"></span>
    </span>
</div>

function autoInsertDate() {
    let d = $('input[name=priority]:checked').val();
    let days = d.split(',')[1];
    let h = days * 24;

    let currentDate = new Date();
    var monthes = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

    currentDate.setMilliseconds(h * 60 * 60 * 1000);
    let year = currentDate.getFullYear();
    let month = monthes[currentDate.getMonth()];
    let day = currentDate.getDate();
    let hour = currentDate.getHours();
    let minutes = (currentDate.getMinutes() < 10) ? '0' + currentDate.getMinutes() : currentDate.getMinutes();
    let time = day + '.' + month + '.' + year + ' ' + hour + ':' + minutes;

    document.getElementById('da').value = time;
}

Я так решил данную задачу. С точки зрения производительности, какой способ лучше?

[Александр Черемхин]

я не думаю что есть существенная разница, да и не важно это в этой задаче.