Question

我需要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>

请帮助我解决这个问题。

Answer 1

您可能应该首先在脚本包括的顶部添加对JQuery的引用，因为它的工作原理与您所说的一样：

import { saveCheckboxInput } from '../../actions/userInputActions';

let store, shallowWrapper;

beforeEach(() => {
    store = mockStore(initialState)
    store.dispatch = jest.fn();
    shallowWrapper = shallow(
      <CheckboxSingle 
         store={store} 
         desc="mockDesc"
         linkId="mockLinkId" 
         relatedLinkIds={["mock1", "mock2"]} 
         stepNumber={1} 
      />
    ).dive();
}); 


test('should call onChange after clicked', () => {
  const action = saveCheckboxInput(
       "mockLinkId", 
       true, 
       "mockDesc", 
       ["mock1", "mock2"], 
       1
  );

  shallowWrapper.find('input[type="checkbox"]')
    .simulate('change', { target: { checked: true } });
  expect(store.dispatch).toHaveBeenCalledWith(action);
});

jQuery Daterangepicker触发器单击以选择开始日期

1 个答案: