【问题标题】:jQuery .on('click', function()) not working with bootstrap-datetimepickerjQuery .on('click', function()) 不适用于 bootstrap-datetimepicker
【发布时间】:2016-10-27 01:30:37
【问题描述】:

我对使用 jQuery 有点陌生,我正在使用 Bootstrap DateTimePicker 来显示日历,我想检索当前选择的日期,但由于某种原因,.on('click') 函数似乎不起作用当我点击这些日子时。

这是 html 代码的样子:

<div style="overflow:hidden;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <div id="datetimepicker"></div>
            </div>
        </div>
    </div>
</div>

而我想做的是:

$(document).ready(function() {
    $('#datetimepicker').on('click', '.day', function() {
        // Get the selected date.
        var date = $(this).val();
    });
});

一天的引导html如下:

<td data-action="selectDay" data-day="10/26/2016" class="day active">26</td>
<td data-action="selectDay" data-day="10/27/2016" class="day today">27</td>
<td data-action="selectDay" data-day="10/28/2016" class="day">28</td>

所以基本上我正在寻找的是活动日的数据日的内容。

JSFiddle

【问题讨论】:

  • @Hsate:下面我们的答案很有帮助,请接受答案;)

标签: javascript jquery html bootstrap-datetimepicker


【解决方案1】:

我使用了以下代码,它适用于多次点击:

$(document).ready(function() {
    $('#datetimepicker').datetimepicker({
        inline: true,
        format: 'DD/MM/YYYY'
    });

    $('div tbody').on('click', 'tr > .day',function(){
        alert($(this).data().day)
    })
});

jsfiddle

要访问 html 元素中 data 属性中存储的数据,您可以在 jQuery .data() 上搜索并阅读更多相关信息

【讨论】:

  • 很高兴我能帮上忙 :)
  • 唯一的问题是,现在 Bootstrap 不会更新当前选择的日期以显示为蓝色...:/
  • 没关系...事实证明这很容易解决:jsfiddle.net/hlynurstef/zpvsrdhp/2
  • 我做了一个更新:jsfiddle.net/12r8psoz,这删除了返回 false
  • 虽然这确实有效,但选择器有一个 dp.change 事件,应该用于获取用户选择的日期。通过这种方式,您可以获得选取器用作模型而不是字符串的时刻对象的副本。
【解决方案2】:

JS:

 $(document).ready(function() {
    $('#datetimepicker').datetimepicker({
        inline: true,
        format: 'DD/MM/YYYY'
    });

    $('div tbody').on('click','td', function(e) {
     alert($(this).attr('data-day'));
    });
});

试试下面的小提琴:

https://jsfiddle.net/80kLcj1q/8/

【讨论】:

  • @Hsate:如果回答有帮助请接受回答:)
  • 这只工作一次,它只给我一天,而不是年份和月份。在引导程序中,这一天被标记为“26”,我想得到数据日的内容是“2016 年 10 月 26 日”,我希望能够一次又一次地做到这一点,而不仅仅是一次。
  • 另外,如果我点击月份似乎不起作用,选择另一个月份(或再次选择同一月份)然后点击一天。
  • @HaSte :是的,你是对的。我正在更新我的答案。
猜你喜欢
  • 2017-05-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多