从datetimepicker bootstrap点击日期获取点击事件

时间:2016-05-04 15:09:29

标签: javascript jquery twitter-bootstrap datetimepicker bootstrap-datetimepicker

我使用datepicker从此网站https://eonasdan.github.io/bootstrap-datetimepicker/

进行引导

当输入为空时,我尝试捕获从开头点击的日期点击。 dp.change的问题是当我点击日历图标时捕获了第一个点击事件。 如果我点击td.day它就会工作。



$(document).ready(function(){		
  $(function () {
    $('#datetimepicker').datetimepicker({
      format:'YYYY-MM-DD',
       locale: 'en'
    });
  });	
  $(".datepicker .datepicker-days td.day").click(function(){
    alert('day clicked');	
  });
  $("#datetimepicker").on("dp.change", function() {
    alert('calendar icon clicked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="input-group date reload_element" id="datetimepicker">
  <span class="input-group-addon reload_element cursor-pointer">
    <i class="fa fa-calendar"></i>
  </span>
  <input type="text" id="start_date" class="form-control reload_element" style="width:100px;" autocomplete="off"/>
</div>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

我迟到了,我没有解决方案,但我知道为什么你的代码不起作用。

日历的结构是在每次显示时生成和删除的,由于这个听众在开始时被删除并丢失了效果,你应该在日历再次生成的时刻附加听众。

也许您想要的解决方案是这样的:警告代码未经过测试。

$(document).ready(function(){		
    $(function () {
        $('#datetimepicker').datetimepicker({
            format:'YYYY-MM-DD',
            locale: 'en'
        });
        var cont = 0;
        $('.reload_element').on("dp.show",function(e){
            $('td.day').on("click",function(e){
                $('#response').text('day clicked '+cont); 
            });
            ++cont;
            return true;
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="input-group date reload_element" id="datetimepicker">
  <span class="input-group-addon reload_element cursor-pointer">
    <i class="fa fa-calendar"></i>
  </span>
  <input type="text" id="start_date" class="form-control reload_element" style="width:100px;" autocomplete="off"/>
</div><span id="response"></span>

答案 1 :(得分:1)

$('.scheduleDate').datepicker({
    format: 'dd/M/yyyy',
}).on('changeDate', function(e) {   
    console.log(e.format());
});

答案 2 :(得分:0)

这不是一个答案,但我是因为代码格式化而添加的。加载页面时,如果您检查div

,则日历不存在

这是live元素,因此请使用jQuery on函数:

$(".datepicker .datepicker-days").on('click', 'td.day', function () {
    alert('day clicked');
});

答案 3 :(得分:0)

 System.Configuration.Configuration config = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None);

 ConfigurationSectionGroupCollection sectionGroups = config.SectionGroups;

         foreach (ConfigurationSectionGroup group in sectionGroups)
        // Loop over all groups
        {
            Console.WriteLine(group);
            if (group.Name == "FileCheckerConfigGroup")
            {
                foreach (ConfigurationSection configurationSection in group.Sections)
                {
                    var section = ConfigurationManager.GetSection(configurationSection.SectionInformation.SectionName) as NameValueCollection;
                }
            }
        }

使用onClose事件获取日期

答案 4 :(得分:0)

我已经使用这种方法获取点击事件

$("#datetimepicker").on("dp.show", function (e) {
$('div tbody').on('click', 'tr > .day', function () {
        alert('day clicked');
})
});