jQuery .bind或.change從日歷onclick填充span標簽值

Question

我有一個預訂表，最終用戶可以保留他們想要的日期，有時可以在付款頁面上更改，如果他們以前嘗試選擇的日期可用，他們會收到通知並有機會更改日期。

我需要能夠填充/更改/綁定到在dom加載時已經呈現文本的span標簽，例如：

<span id="ReservationDate" name="ReservationDate">Your reservation date: 23/03/2016</span>

如果他們單擊以更改日期，則日歷將提供可用日期，而onclick將選擇具有以下示例屬性的日期：

<td data-day="23" class="is-selected"><button class="pika-button" type="button">23</button></td>

<td data-day="24" class=""><button class="pika-button" type="button">24</button></td>

我需要能夠綁定日期屬性，例如：他們選擇的data-day="24"到span標簽，而不必將span標簽更改為輸入字段，因為這會破壞CSS和頁面的布局。

作為jquery和javascript的新手，如果有人可以幫上忙，我將非常感激，這將意味着很多並且非常感激。

謝謝。

簡短更新：

                    <div class="PaymentForm-ReservationDate">
                     <span id="ReservationDate" name="ReservationDate">Date: {{ $getResDate }}</span><br/>
                     <a href="" date-picker="" id="reservation-date">Change Date?</a>
                    </div>

Answer 1

嘗試這個：

var span = document.getElementById( 'ReservationDate' );

var updateDate = function(){
    span.innerHTML = 'Your reservation date: ' + this.dataset.day + span.innerHTML.slice( -8 );
};

var tds = document.getElementsByTagName( 'td' );
for( var i=0; i<tds.length; i++ )
    tds[i].onclick = updateDate;

Answer 2

我不確定這是否可以解決您的問題，但是有以下代碼：

    $(document).on('click', '.pika-button', function(){
      var dataDay = $(this).parent('td').attr('data-day');
      $('span#ReservationDate').text('Your reservation date: ' + dataDay + '/03/2016')
    });