如何设置默认日期参数以传递给 ajax 在 JavaScript 中调用，在选择日期值时它应该更改

Question

I am trying display current date attendance on page load and after selecting a date then I am selecting that date details and displaying it.我正在尝试在页面加载时显示当前日期出勤率，并在选择日期后选择该日期详细信息并显示它。

Result I am getting and what I need:我得到的结果和我需要的：

Right now my result is:现在我的结果是：

If I search a desired date I am getting both default date data and selected date data.如果我搜索所需的日期，我会同时获得默认日期数据和选定日期数据。
problem is that whenever I click a search button obviously page will reload then default value will function will also run so I am getting both value.问题是，每当我单击搜索按钮时，显然页面会重新加载，然后默认值 function 也会运行，所以我得到了两个值。

Solution I need is:我需要的解决方案是：

As I need current date data, I can't change the onload function.由于我需要当前日期数据，我无法更改加载 function。
And when I click the search button it should take the desired date value not the onload date value so that I can pass it to ajax as a parameter.当我单击搜索按钮时，它应该采用所需的日期值而不是加载日期值，以便我可以将其作为参数传递给 ajax。

Let's consider a input date field and setting this input date field as default ajax call parameter to pass to get a particular data according to parameter passed.让我们考虑一个输入日期字段并将此输入日期字段设置为默认 ajax 调用参数传递以根据传递的参数获取特定数据。

Datesearch.jsp日期搜索.jsp

<html><body>
<input type="text" class="form-control input-sm datepicker" id="DtPicker">
<button type="button" id="Search" onclick=SearchDate()>Search</button
</body></html>

Now I am setting default date value Onload from input date field, and on selecting desired date parameter from same date field and on clicking search Button it should pass that preferred parameter to ajax parameter instead of default parameter.现在我从输入日期字段设置默认日期值 Onload，并从同一日期字段中选择所需的日期参数并单击搜索按钮，它应该将该首选参数传递给 ajax 参数而不是默认参数。

DateSearch.js日期搜索.js

(function () {
    $.fn.dataTable.ext.errMode = 'none';
    $( "#srchVehDtPicker" ).datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
    });

// Here i am setting default date value to var that is current date that is seeted on the input date field onload.

    var utc = new Date().toJSON().slice(0,10);
    document.getElementById("DtPicker").value =utc;

// calling ajax funtion with default parametr. 
attendance(utc);

}());

// On button click search funtion is called where selected date is collected passed to ajax as parameter
function SearchDate(){

// taking the value from input date value on button click.
    var searchdate = $("#DtPicker").val();
    var utc = searchdate.toString();

// calling ajax value with a value as a parameter.
    attendance(utc);
}

function attendance(utc){
    var url = "projecturl?utc="+utc;
        $.ajax({
            type : "GET",
            url : url,
            cache : false,  
            contentType: "text/plain",
            dataType: 'json',
            success : function(data) 
            {           
                AttendanceDetailsObj = data[0].Result;
                AttendanceList(AttendanceDetailsObj);

            }
    });
}

Attendance.java

Here i am trying to fetch data according to date passed and i am trying to fetch that are greater than and equal to passed date.在这里，我试图根据传递的日期获取数据，并且我试图获取大于和等于传递日期的数据。

And when default date is passed only that date data should appear not other values.并且当默认日期被传递时，只有该日期数据不应该出现其他值。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        JSONArray finalResultAry = new JSONArray();
        String utc = request.getParameter("utc");
        //String utc = "2020-04-29";

        JSONArray AttendanceDetailsRstAry = new JSONArray();
        JSONObject AttendanceDetailsObj = new JSONObject();
        ResultSet rs = null;
        Statement smt = null;

        try {

            DBConnect connect = new DBConnect();
            Connection connection = connect.connect();
            smt = connection.createStatement();

            String  attendanceselectallQry = "select * from Attendance where Plan_Date>='"+utc+"'";

            rs = smt.executeQuery(attendanceselectallQry);

                while (rs.next()) {
                    JSONObject AttendanceDetailsRstObj = new JSONObject();
                    AttendanceDetailsRstObj.put("Id",rs.getInt("Employee_ID"));
                    AttendanceDetailsRstObj.put("Name",rs.getString("Employee_Name"));
                    AttendanceDetailsRstObj.put("presenttype",rs.getString("Present_Type"));
                    AttendanceDetailsRstObj.put("plandate",rs.getString("Plan_Date"));
                    AttendanceDetailsRstObj.put("sanctionedon",rs.getString("Sanctioned_On"));
                    AttendanceDetailsRstObj.put("leaveot",rs.getString("Leave_OT"));
                    AttendanceDetailsRstAry.put(AttendanceDetailsRstObj);

                }
            AttendanceDetailsObj.put("Result", AttendanceDetailsRstAry);
            finalResultAry.put(AttendanceDetailsObj);

            smt.close();

        }catch (Exception e) {
            e.printStackTrace();
        }

        response.getWriter().write(finalResultAry.toString());

    }

Answer 1

You can use Window.localStorage to check if the page is reloaded for the first time or not.By using this you need to setItem in localStorage which will be used to check if the item is set or not depending upon that you can perform required operation.您可以使用Window.localStorage来检查页面是否是第一次重新加载。通过使用这个，您需要在setItem中设置项目，用于检查item是否设置，这取决于您可以执行所需的操作.

So, your jquery code will look like below:因此，您的 jquery 代码将如下所示：

(function() {
  $.fn.dataTable.ext.errMode = 'none';
  $("#srchVehDtPicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  });
  if (window.localStorage) { //checking   value in local storage
    if (!localStorage.getItem('firstLoad')) {
      //settting value in localstorage
      localStorage['firstLoad'] = true;
      var utc = new Date().toJSON().slice(0, 10);
      document.getElementById("DtPicker").value = utc;
      console.log("First time load");
      // calling ajax funtion with default parametr. 
      attendance(utc);
    } else {
      //do something 
      console.log("Not loaded first time");
    }
  }

}());

Update 1 : As i have already said that you can use sessionStorage to store the value of date and and whenever your page reload check that store data against the default value of date if differ then take sessionStorage value else take default value.Your code will look like below:更新 1 ：正如我已经说过的，您可以使用sessionStorage来存储日期的值，并且每当您的页面重新加载时，检查存储数据是否与日期的默认值不同，如果不同，则采用sessionStorage值，否则采用默认值。您的代码将看起来如下所示：

(function() {
  $.fn.dataTable.ext.errMode = 'none';
  $("#srchVehDtPicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  });
  var utc = new Date().toJSON().slice(0, 10);
  document.getElementById("DtPicker").value = utc;
  //if there is some value in session
  if (window.sessionStorage) {
    //getting current value in sessionStorage
    var date_value = sessionStorage.getItem("date");
    //value fetch is equal to current date
    if (date_value == utc) {
      //setting current value 
      sessionStorage.setItem("date", utc);
      //calling function
      attendance(utc);

    } else if (date_value != utc) {
      //setting session storage with updated value
      sessionStorage.setItem("date", date_value);
    }


  } else {
    //onload setting session
    sessionStorage.setItem("date", utc);
    attendance(utc);
  }

}());

// On button click search funtion is called where selected date is collected passed to ajax as parameter
function SearchDate() {

  // taking the value from input date value on button click.
  var searchdate = $("#DtPicker").val();
  var utc = searchdate.toString();
  //setting value in session
  sessionStorage.setItem("date", utc)
  // calling ajax value with a value as a parameter.
  attendance(utc);
}

(Above code is not tested but, it should work.Sorry for any syntax error) （以上代码未经测试，但应该可以工作。抱歉有任何语法错误）

如何设置默认日期参数以传递给 ajax 在 JavaScript 中调用，在选择日期值时它应该更改

问题描述

1 个解决方案

解决方案1
0 2020-05-05 16:07:17

如何设置默认日期参数以传递给 ajax 在 JavaScript 中调用，在选择日期值时它应该更改

问题描述

1 个解决方案

解决方案1 0 2020-05-05 16:07:17

解决方案1
0 2020-05-05 16:07:17