简体   繁体   English

Bootstrap jQuery时间选择器

[英]Bootstrap Jquery Timepicker

I'm trying to implement a check in check out date-picker also I'm not good with Jquery I'm having some problems making it run. 我正在尝试实现一个签入日期选择器的签入,但是我对Jquery不好,因此在运行它时遇到了一些问题。 I've also checked if the jquery is loading and it does can someone help me on what I'm doing wrong. 我还检查了jquery是否正在加载,它确实可以帮助我解决我做错的事情。

$(document).ready(function () {

        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#dpd1').datepicker({
          onRender: function(date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
          }
        }).on('changeDate', function(ev) {
          if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 1);
            checkout.setValue(newDate);
          }
          checkin.hide();
          $('#dpd2')[0].focus();
        }).data('datepicker');
        var checkout = $('#dpd2').datepicker({
          onRender: function(date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
          }
        }).on('changeDate', function(ev) {
          checkout.hide();
        }).data('datepicker');


        });



         </script>
        </head>
        <body onload>
        <div class="well" id="div1">
              <table class="table">
                <thead>
                  <tr>
                    <th>Check in: <input type="text" class="span2" value="" id="dpd1"></th>
                    <th>Check out: <input type="text" class="span2" value="" id="dpd2"></th>

You are not connected to plugin js files. 您尚未连接到插件js文件。 it will not work without including needed external Resources. 如果不包括所需的外部资源,它将无法正常工作。

      <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css">

     <script type='text/javascript' src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
     <link rel="stylesheet" type="text/css" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">

Please check this working example with your code. 请使用您的代码检查此工作示例。 Fiddle 小提琴

add needed external resources. 添加所需的外部资源。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM