Подмена элемента на jQuery

Хочу реализовать следующее:

• Есть label.calendar-button, при нажатии хочу получить в его же div input с возможностью указания даты (возможно с timepicker).
• После выбора даты необходимо вернуть .calendar-button с заданным значением даты. Возможно?

Сейчас имею:

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

После нажатия нужно получить:

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

И, соответственно, после указания даты получить обратно:

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

Интересует конкретно javascript, как и что нужно навешать?