从DatePicker中保存日期,并将日期发送到数据表中

问题描述 投票:1回答:1

由于我的开发人员不可用,我正在尝试在项目中使用我的少量JQuery知识,但是我正面临一个障碍。我正在尝试创建一个cookie,该cookie将在日期选择器中保存用户选择的日期范围,并在用户刷新或返回页面时使报告在datatable中可用。

我现在成功完成的工作是,选择日期后创建/刷新cookie,并在用户返回时将选择的日期范围重新设置为datepicker,但由于这些日期未刷新报告,因为Ajax请求未发送至数据表。

到目前为止是我的代码:

$('#demo').daterangepicker({
    "timePicker24Hour": true,
    "autoApply": true,
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "alwaysShowCalendars": true,
    "startDate": Cookies.get('startdate'),
    "endDate": Cookies.get('enddate'),
    "opens": "left",
    }, function(start, end, label) {
        $("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
        var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
        Cookies.set('startdate', start.format('MM/DD/YYYY'));
        Cookies.set('enddate', end.format('MM/DD/YYYY'));
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
});

我需要在代码结尾处的Ajax请求,以便在页面加载时执行。我尝试了下面的代码,但似乎没有用。矮个子,它会在页面加载时创建cookie(如果不存在的话),否则它将使用cookie中的日期将Ajax请求发送到数据表以显示报告:

$(function(){
    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();

    var output = 
        ((''+month).length<2 ? '0' : '') + month + '/' +
        ((''+day).length<2 ? '0' : '') + day  + '/'
        + d.getFullYear() ;

    if (Cookies.get('startdate')  == null || Cookies.get('enddate') == null) {
          Cookies.set('startdate', output);
          Cookies.set('enddate', output);
    }

    if (Cookies.get('startdate') && Cookies.get('enddate')) {
        var todaydate = Cookies.get('startdate')+"to"+Cookies.get('enddate');
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
    }
});

编辑:我认为我没有在适当的位置进行更改。我有此代码正是campaign-table.php应该加载的位置。

$(document).ready(function(){
    var todaydate = (new Date()).toISOString().split('T')[0]+"to"+(new Date()).toISOString().split('T')[0];
    $.ajax({
        url:"campaign-table.php",
        method:"POST",
        data:{todaydate:todaydate},
        success:function(data){
            $('#campaigntable').html(data);
        }
    });
});
javascript jquery cookies
1个回答
0
投票

如果我正确理解了这个问题,您是否需要与用户选择页面加载发生日期的功能相同的功能?这意味着:

  • 检查我们是否已有用于现有开始/结束日期的cookie;
  • 如果存在,请使用它们;如果不使用某些默认值(今天?);
  • 使用这些日期触发AJAX请求;
  • 使用来自AJAX的响应更新数据表;

为此,我仅需更改一些小事:

1] daterangepicker当前使用现有的cookie设置开始/结束日期。但这将在用户第一次访问该页面时失败,因为这些cookie尚不存在。可以在此处测试并设置一些默认值来处理这种情况。

2)您要在页面加载时运行的AJAX与用户选择日期时要运行的AJAX完全相同。因此,我将其提取到一个通用函数中,您可以在每个需要的地方引用它,以避免重复代码。

$(document).ready(function(){
    // Create a simple function to fire the AJAX using the date you specify,
    // and show the response on the page.  We can reference this whenever we
    // need to do that.
    function showReport(todaydate) {
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
    }

    // Check if we have cookies with dates, if not, set them to defaults
    // (today for both).  Now when the date range picker uses the
    // cookies the very first time a user visits, it will work.
    if (Cookies.get('startdate') == null || Cookies.get('enddate') == null) {
        Cookies.set('startdate', (new Date()).toISOString().split('T')[0]);
        Cookies.set('enddate', (new Date()).toISOString().split('T')[0]);
    }

    var todaydate = Cookies.get('startdate') + "to" + Cookies.get('enddate');

    // We have our dates, fire off the AJAX, and display the response.
    // This runs on page load, as you need.
    showReport(todaydate);

    // Now initialise the date range picker
    $('#demo').daterangepicker({
        // ... all your options, unchanged ...
    }, function(start, end, label) {
        $("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
        var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
        Cookies.set('startdate', start.format('MM/DD/YYYY'));
        Cookies.set('enddate', end.format('MM/DD/YYYY'));

        // Fire off the AJAX with the selected dates and show the response.
        showReport(todaydate);
    });
});

您不需要以$(function(){开头的问题中引用的代码,我们刚刚添加到$(document).ready(function(){的东西现在就可以处理。

© www.soinside.com 2019 - 2024. All rights reserved.