在日期选择器中显示当前日期

Display Current date in the datepicker

本文关键字:显示 当前日期 选择器 日期      更新时间:2023-09-26

目标:
检索当前日期,然后在"数据日期"(中的"开始"answers"结束"日期(以及id的"开始日期"answers"终止日期"中超过该日期。

问题:

代码:

var d = new Date();
var strDate = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
$('.dp4').html(strDate);
$('.dp5').html(strDate);
$('#startDate2').html(strDate);
$('#endDate2').html(strDate);

当我使用JSFiddle时效果很好,但当我将其与日期选择器结合使用时效果不佳。

找不到问题。

https://jsfiddle.net/cszwtnsv/
http://www.eyecon.ro/bootstrap-datepicker/


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Datepicker for Bootstrap, from Twitter</title>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link href="C:'1'Datepicker for Bootstrap, from Twitter_files'datepicker.css" rel="stylesheet">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="C:'1'Datepicker for Bootstrap, from Twitter_files'jquery.js"></script>
        <script src="C:'1'Datepicker for Bootstrap, from Twitter_files'bootstrap-datepicker.js"></script>
        <script>
        if (top.location != location) {
        top.location.href = document.location.href ;
      }
            $(function(){
                window.prettyPrint && prettyPrint();
                $('#dp1').datepicker({
                    format: 'mm-dd-yyyy'
                });
                $('#dp2').datepicker();
                $('#dp3').datepicker();
                $('#dp3').datepicker();
                $('#dpYears').datepicker();
                $('#dpMonths').datepicker();

                var startDate = new Date(2015,1,20);
                var endDate = new Date(2015,1,25);
                $('#dp4').datepicker()
                    .on('changeDate', function(ev){
                        if (ev.date.valueOf() > endDate.valueOf()){
                            $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                        } else {
                            $('#alert').hide();
                            startDate = new Date(ev.date);
                            $('#startDate').text($('#dp4').data('date'));
                        }
                        $('#dp4').datepicker('hide');
                    });
                $('#dp5').datepicker()
                    .on('changeDate', function(ev){
                        if (ev.date.valueOf() < startDate.valueOf()){
                            $('#alert').show().find('strong').text('The end date can not be less then the start date');
                        } else {
                            $('#alert').hide();
                            endDate = new Date(ev.date);
                            $('#endDate').text($('#dp5').data('date'));
                        }
                        $('#dp5').datepicker('hide');
                    });
            // disabling dates
            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>   
        <script>
    var d = new Date();
    var strDate = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
    $('.dp4').html(strDate);
    $('.dp5').html(strDate);
    $('#startDate').html(strDate);
    $('#endDate').html(strDate);
        </script>
        <style>
        .container {
            background: #fff;
        }
        #alert {
            display: none;
        }
        </style>    
      </head>
      <body>
      <div class="container">
        <section id="typeahead">


          <div class="row">

            <div class="span9 columns">


              <div class="well">
                <div class="alert alert-error" id="alert">
                    <strong>Oh snap!</strong>
                  </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2015-2-21">Change</a></th>
                            <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2015-2-25">Change</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="startDate">
                            </td>
                            <td id="endDate">
                            </td>
                        </tr>
                    </tbody>
                </table>
              </div>


            </div>
          </div>
        </section>
    </div>

      </body>
     </html>

可能是您的字符串

var strDate = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();

"2015-6-11"与格式"2015-06-11"(yyyy-mm-dd(不匹配