无法从文本框中删除引导日期选择器

时间:2016-09-30 05:37:14

标签: jquery datepicker bind bootstrap-datepicker unbind

我的情况是我有几个文本框  我手动在jquery中手动添加带有该文本框的引导日期选择器

$('#dataRange input').addClass('datepicker');
$('.datepicker').datepicker({dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()).focus();

然后当我尝试删除或取消绑定时

$('.datepicker').datepicker('destroy');
$(".datepicker").unbind('focus');
$('#dataRange input').removeClass('datepicker');

然后我无法使用第一个代码更改日期选择器,日期选择器下拉框不显示:(

2 个答案:

答案 0 :(得分:0)

它在这里工作请看这个。我想你错过了一些活动。我添加了两个按钮,例如绑定和取消绑定,并且在点击事件中我分别绑定和取消绑定了datepicker及其工作。查看我的fiddle

$('#dataRange input').addClass('datepicker');
            $('.datepicker').datepicker({dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()).focus();
            $(".unbind").on("click", function () {
                $('.datepicker').datepicker('destroy');
            });
            $(".bind").on("click", function () {
                $('.datepicker').datepicker({dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()).focus();
            });
<div id="dataRange">
            <input type="text" name="datein" value="">
        </div>
        <button class="unbind">unbind</button>
        <button class="bind">bind</button>

答案 1 :(得分:0)

Rakesh Sojitra是解析员。我只是让他的代码为你剪断。

&#13;
&#13;
$(function () {
                $('#dataRange input').addClass('datepicker');
                $('.datepicker').datepicker({dateFormat: "yy-mm-dd",autoclose:true}).datepicker("setDate", new Date()).focus();
                $(".unbind").on("click", function () {
                    $('.datepicker').datepicker('destroy');
                });
                $(".bind").on("click", function () {
                    $('.datepicker').datepicker({dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()).focus();
                });
            });
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>

<form action="#" method="post">
    <div id="dataRange">
            <input type="text" name="datein" value="">
        </div>
        <button class="unbind">unbind</button>
        <button class="bind">bind</button>
</form>
&#13;
&#13;
&#13;