Question

我的目标是使用文本框动态附加/分离bootstrap datepicker。根据drowdown值，我想用文本框附加/分离bootstrap datepicker。我尝试了以下方式，但它不起作用.....我在那里缺少什么？

<div class="container">
  <div class="row">
    <div class='col-sm-2'>
      <div class="form-group col-xs-5 col-lg-1">
        <select id="dddata">
          <option value="Text">Text</option>
          <option value="Date">Date</option>
        </select>
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
        </div>
      </div>
    </div>
  </div>
</div>

var $htmlelement = $('<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>');

var isDate = 0;

$(document).ready(function() {
  SetUPUI();
  $("#dddata").change(function() {
    SetUPUI();
  });
});

function SetUPUI() {
  if ($('#dddata').val() == "Date") {
    alert('pp');
    $('#datetimepicker1').append($htmlelement);
    $('#datetimepicker1').datepicker({
      autoclose: true,
      format: "mm/dd/yyyy"
    });
  } else {
    $("#datetimepicker1").remove($htmlelement);
    $('#datetimepicker1').datepicker('remove');
  }
}

浏览器控制台显示此错误

jquery-1.9.1.js：4370未捕获的TypeError：expr.replace不是功能在Function.Sizzle.matchesSelector（VM235 jquery-1.9.1.js：4370）在Function.filter（VM235 jquery-1.9.1.js：5757）在init.remove（VM235 jquery-1.9.1.js：5986）在SetUPUI（（索引）：87）在HTMLDocument。（（指数）：68）在火上（VM235 jquery-1.9.1.js：1037） at Object.add [as done]（VM235 jquery-1.9.1.js：1083）在init.ready（VM235 jquery-1.9.1.js：275）在（指数）：66 at dispatch（VM235 jquery-1.9.1.js：3074）Sizzle.matchesSelector @ jquery-1.9.1.js：4370 filter @ jquery-1.9.1.js：5757 remove @ jquery-1.9.1.js：5986 SetUPUI @（索引）：87（匿名）@（索引）：68 fire @ jquery-1.9.1.js：1037 add @ jquery-1.9.1.js：1083 ready @ jquery-1.9.1.js：275（匿名）@（索引）：66发送@ jquery-1.9.1.js：3074 elemData.handle @jquery-1.9.1.js：2750

Answer 1

有多个问题。主要的一点是你在文档准备好之前使用jQuery来创建你的$htmlelement ，并且没有加载jQuery，所以它抛出了一个错误。（注意，您的浏览器的开发者控制台是一个功能强大，有用的工具。学会使用它 - 它可以节省您很多时间查找问题。）

以下是您的代码的注释版本，经过修改后可正常运行。（注意 - 作为一个片段，所以你可以点击蓝色的“运行片段”来看它是否正常工作）

// no-conflict safe, shorthand document ready jQuery(function($) { // Move this inside document ready (otherwise, jQuery is not available and throws an error) var $htmlelement = jQuery('<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">CALENDAR</span></span>'); SetUPUI(); $("#dddata").change(function() { SetUPUI(); }); function SetUPUI() { if ($('#dddata').val() == "Date") { $('#datetimepicker1').append($htmlelement); // bind datepicker to the element $('#datetimepicker1').datepicker({ autoclose: true, format: "mm/dd/yyyy" }); } else { // remove the proper element $('#datetimepicker1 span.input-group-addon').remove(); // call destroy (remove does not work) $('#datetimepicker1').datepicker('remove'); } } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"> <div class="container"> <div class="row"> <div class='col-sm-2'> <div class="form-group col-xs-5 col-lg-1"> <select id="dddata"> <option value="Text">Text</option> <option value="Date">Date</option> </select> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> </div> </div> </div> </div> </div>

Answer 2

var $htmlelement=$('<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>');

var isDate=0;

function SetUPUI()
{
    if($('#dddata').val()=="Date")
    {
        alert('pp');
        $('#datetimepicker1').append($htmlelement);
        $('#datetimepicker1').datepicker({
        autoclose: true,  
        format: "mm/dd/yyyy"
        }); 
    }
    else
    {
        $htmlelement.detach();  // to dynamically remove the html 
           $('#datetimepicker1').datepicker('destroy'); // you was using remove that is deprecated and replace with "destroy"
    }
}

$(document).ready(function () 
{
    //SetUPUI();
    $("#dddata").change(function () {
        SetUPUI();
    });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class='col-sm-2'>
            <div class="form-group col-xs-5 col-lg-1">
<select id="dddata">
  <option value="Text">Text</option>
  <option value="Date">Date</option>
</select>            
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                </div>
            </div>
        </div>

    </div>
</div>

如何使用文本框

浏览器控制台显示此错误

2 个答案: