Question

我有一个预订表格，最终用户可以预订他们希望的日期。有时这可以更改到付款页面，如果他们之前尝试选择的日期可用，他们会收到通知，并有机会更改日期。

我需要能够填充/更改/绑定到已经在dom加载时呈现文本的span标记，例如：

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

如果他们点击更改日期，日历会提供可用日期，并且点击选择具有以下示例属性的日期：

<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和页面布局。 / p>

作为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')
    });

jquery .bind或.change从日历onclick

2 个答案: