Question

我试图让Bootstarp-Datepicker工作，我已经非常接近了。但是，现在我已经找到了如何设置startDate并且能够自动关闭＆＃34; autoclose＆＃34;工作我无法选择＆＃34; setDate＆＃34;

中设置的日期

如果我调出日历，然后手动选择另一个显示为已选择的日期，但setDate值不会显示所选的日期。我做了很多搜索，但似乎无法找到合适的组合。

BTW：查看F12工具我确实有错误，但它说“＃34;无法加载资源：服务器响应404（未找到）＆＃34;并且源指向＆＃34; / fonts / glyphicons-halflings-regular＆＃34;文件。我不认为这与它有任何关系，但我会为此发布一个单独的问题。

这是我的HTML

<div class="col-md-2 text-left">
    <div id="StartDate" class="input-group date">
        <input class="datepicker form-control" type="text" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>
<div class="col-md-2">
    <div id="EndDate" class="input-group date">
        <input type="text" class="form-control">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>
</div>

这是我的JS。这个JS将设置日期并使autoclose工作，但它不会选择使用setDate方法设置的日期。

<script type="text/javascript">
    $(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker({
            autoclose: true
        }).datepicker("update", startDate);

        $("#EndDate").datepicker({
            autoclose: true
        }).datepicker("update", endDate);
    });
</script>

如果我切换到这个JS代码，我可以让setDate工作，并获得设置为选择的日期。但是，这会导致autoclose无法正常工作。

<script type="text/javascript">
    $(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker("setDate", startDate);
        $("#StartDate").datepicker("autoclose", true);
        $("#StartDate").datepicker("update");
    });
</script>

Answer 1

当AutoClose无效时，您可以使用此功能强制它：

$('#StartDate').datepicker().on('changeDate', function(ev){
    $('#StartDate').datepicker('hide');
});

＆＃13;

$(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker("setDate", startDate);
        
        $("#StartDate").datepicker("update");
        
        $('#StartDate').datepicker().on('changeDate', function(ev){  
            $('#StartDate').datepicker('hide');
        });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">

<div class="col-md-2 text-left">
    <div id="StartDate" class="input-group date">
        <input class="datepicker form-control" type="text" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>

＆＃13;

Bootstrap-Datepicker在使用＆＃34; setDate＆＃34;时没有选择日期。

1 个答案: