jquery .bind或.change从日历填充span标记值onclick

我有一个预订表单，最终用户可以预订他们希望的日期，有时这可以更改到付款页面，如果他们以前尝试过的日期选择变得可用，他们被通知并给予机会改变日期。jquery .bind或.change从日历填充span标记值onclick

我需要能够填充/变更/绑定到已有的文本渲染span标记当DOM负载，例如：

<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"，他们选择跨度标签，而不必跨度标签更改为输入字段作为此wi会打破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>

来源

2016-03-15 Blem19

试试这个：

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;

来源

2016-03-15 18:59:34 destoryer

嗨janje，不幸的是，我似乎无法得到那个工作，我想说感谢您抽出时间来协助，虽然它的极大appreicated，我已经更新我的问题与ful l div元素和span标记到标记的结构如何，我不知道为什么它不起作用，日期从第一次呈现时根本没有改变。希望我们能够解决这个问题，因为它现在真的让我感到满意，花了几个小时试图解决这个微小的问题。 – Blem19

@ Blem19我想这个问题是在其他地方，你可以看到[这里]（https://jsfiddle.net/qkc7ttw4/），日期确实发生了变化。 – destoryer

我不知道这是否解决您的问题，但代码：

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

来源

2016-03-15 19:04:39

不幸的是，我不想说，谢谢你抽出时间来帮助，虽然它的大大appreicated，我已经更新了我的问题与完整的div元素和跨标记如何标记的结构，林不知道为什么它不工作，这个日期根本不会改变，当它的第一次呈现:( – Blem19

这个{{$ getResDate}}是后端或者一些前端模板处理器的时候？ –

它的laravel后端 – Blem19

jquery .bind或.change从日历填充span标记值onclick

回答

相关问题