JQuery Daterangepicker триггер нажмите, чтобы выбрать дату начала - PullRequest
Новая
       12

JQuery Daterangepicker триггер нажмите, чтобы выбрать дату начала

0 голосов
/ 06 сентября 2018

Мне нужна помощь для выбора даты jQuery. Я пытаюсь вызвать щелчок и выбрать startDate во время вызова средства выбора даты. и после этого, когда я вручную нажму на будущую дату, она будет считаться конечной датой и установлю диапазон дат для средства выбора диапазона дат. Но я не могу этого сделать.

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>

Пожалуйста, помогите мне в этом вопросе.

1 Ответ

0 голосов
/ 06 сентября 2018

Возможно, вам следует начать с добавления ссылки на JQuery в верхней части вашего скрипта включает, потому что он работает так же, как вы говорите с этим: 

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