I want to implement the following:

  • There is a label.calendar-button , when clicked, I want to receive in its div input with the possibility of specifying a date (possibly with a timepicker ).
  • After selecting the date, you must return the .calendar-button with the specified date value. Maybe?

Now I have:

 <label class="calendar-button"> <div id="content"> <input type="radio" name="date" id="16092017">Выбрать день<br> <span>не выбрано</span> </div> </label>

After clicking you need to get:

 <label class="calendar-button"> <div id="content"> <input type="text" name="date" value="" placeholder="Укажите дату"> </div> </label>

And, accordingly, after specifying the date, get back

 <label class="calendar-button"> <div id="content"> <input type="radio" name="date" id="*Выбранная дата*">Выбор даты<br> <span>*Выбранная дата*</span> </div> </label>

Specifically, javascript is interested in, how and what should be hung up?

  • 2
    JS! = Java, as much as you can already - Byulent
  • I beg your pardon, newbie, I do not rummage. Do you have any suggestions for JS? - Yuri Bondarenko

1 answer 1

You need to do the following steps.

  • When you click on the button "Select day" hide items to show, show items to enter.
  • When you click on the "Ok" button, hide the elements for input, show the elements for display, write the value to span.

Jsfiddle example

 $(document).ready(function() { $('#btn-show-input').on('click', function() { //Устанавливаем обработчик нажатия на кнопку $('#content-show').hide(); //прячем контет для показа $('#content-input').show(); //показываем контет для ввода }); $('#btn-hide-input').on('click', function() { //Устанавливаем обработчик нажатия на ОК $('#content-show').show(); //показываем контет для показа $('#content-input').hide(); //прячем контет для ввода var dateVal = $('#input-date').val(); $('#result').text(dateVal); //Записываем в span значение, введенное в инпут $('#date-input-show').val(dateVal); //Записываем в input значение, введенное в инпут }); }); 
 #content-input { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="calendar-button"> <div id="content"> <form id="content-show"> <input type="button" id="btn-show-input" value="Выбрать день"> <input type="hidden" name="date" id="date-input-show"> <br> <span id="result">не выбрано</span> </form> <div id="content-input"> <input type="text" name="date" value="" id="input-date" placeholder="Укажите дату"> <input type="button" value="ok" id="btn-hide-input"> </div> </div> </label>

  • Thanks, practically what you need! but there is still a snag: <input type = "radio" name = "date" id = " Selected date ">. In fact, I need to write down the value and send it to the processor in the same form - Yuri Bondarenko
  • @Yuriy Bondarenko Do you want the value of the selected date to be written in the ** id ** attribute of the input with type="radio" ? It is very strange. I think you need to make a hidden input. I will update my answer. - Stepan Kasyanenko