jQuery Daterangepicker 触发点击选择开始日期答案

【问题标题】：jQuery Daterangepicker trigger click to select the start datejQuery Daterangepicker 触发点击选择开始日期
【发布时间】：2018-09-07 01:13:48
【问题描述】：

我需要 jQuery daterangepicker 的帮助。我试图在调用 daterangepicker 时触发单击并选择 startDate。在那之后，我将手动单击将来的日期，它将被视为结束日期并为 daterangepicker 设置日期范围。但我做不到。

HTML-

<html>
<head>
<title>Test datepicker</title>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<div class="from">
    <div class="panel">
        <p>From Date</p>
        <input type="textbox" name="from" id="from">
    </div>
    <div class="panel">
        <p>To Date</p>
        <input type="textbox" name="to" id="to">
    </div>
</div>
</body>
</html>

JS 代码是 -

<script type="text/javascript">
var toval = '';
$(document).ready(function(){
    $('#from').daterangepicker({
        "showDropdowns": true,
        "singleDatePicker": true
    });

    $("#from").change(function(){
        $('#from').css('color','#000');
        var from =  $("#from").val();
        if(toval=='') {
            $('#to').daterangepicker({
                "showDropdowns": true,
                "autoApply": true,
                "startDate": from,
                "endDate": from
            });
        } else {
            $('#to').daterangepicker({
                "showDropdowns": true,
                "autoApply": true,
                "startDate": from,
                "endDate": from+" - "+toval
            });
        }
        $('#to').css('color','#fff');
        $(".right").hide();
    });

    $("#to").change(function(){
        toval = $("#to").val();
        toval = toval.split(" - ");
        var frm = toval[0];
        toval = toval[1];
        $('#to').val(toval);
        $('#from').val(frm);
        $('#to').css('color','#000');
    });

    if(toval=='') {
        var from =  $("#from").val();
        $('#to').daterangepicker({
            "showDropdowns": true,
            "autoApply": true,
            "startDate": from,
            "endDate": from
        });
    } else {
        $('#to').daterangepicker({
            "showDropdowns": true,
            "autoApply": true,
            "startDate": from,
            "endDate": from+" - "+toval
        });
    }
    $('#to').css('color','#fff');
    $('#from').css('color','#fff');
    $(".right").hide();
});
</script>

请帮我解决这个问题。

【问题讨论】：

标签： jquery daterangepicker

【解决方案1】：

您可能应该首先在您的脚本包含的顶部添加对 JQuery 的引用，因为它就像您所说的那样工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

他确实在顶部添加了 JQuery :))
与所有其他本地资源不同，它可能已经过时了。
@JanAndersen 已经添加了 jQuery 库。这就是显示日期选择器的原因，否则日期选择器将不会显示。
我复制并测试了您的代码。当然，我唯一无法复制的是您正在使用的 JQuery 引用，因为您已将其添加为本地引用。使用上面的那个就像一个魅力。顺便说一句，您确实知道您已将 css 设置为以与背景相同的颜色为开始文本着色（至少在我看来是这样），因此从一开始就使其不可见，直到您完全选择了任何内容？