卡在递增日期上

时间:2018-12-18 05:47:48

标签: javascript jquery html date increment

因此,我正在尝试创建一个页面,其中包含按日期排序的一组PDF。我似乎无法正确地增加日期。我不确定这里出了什么问题。我现在两次重写了代码。没运气。

当前问题是,日期的设置变量未整体保留日期的值。 IE从2018年12月31日开始递增,或者在url格式为20181231的情况下递增,结果应为urlIncremented=20190101。 2019年1月1日,但我的代码结果为urlIncremented=20181232

如果将一个循环的最终结果设置为2018年6月8日,则应为:url20180608

我在这里搜索建议,并找到了一个名为Date.JS的JS文件,我已经将其导入,并且看起来很有希望,但只是对其部分代码进行了控制,即:

function () {
   if (this._isSecond) {
        this._isSecond=false;
        return this;
   }
   if (this._same) {
        this._same=this._is=false;
        var o1=this.toObject(),
            o2=(arguments[0] || new Date()).toObject(), 
            v="",
            k=j.toLowerCase();
        for (var m=(px.length-1); m>-1; m--) { 
            v=px[m].toLowerCase();
            if (o1[v]!=o2[v]) { 
                return false;
            }
            if (k==v) { 
                break;
            }
        }
        return true;
   }
   if (j.substring(j.length-1)!="s") { 
       j+="s";
   }
   return this["add"+j](this._orient);
}

要抬起头,我还不知道JQuery,我只是在玩它,看它是否有帮助。

这是我的实际代码。

 let url = "blank",
        firstRun = true;
    
    /* 
    function setDateByIncrement(currentSetDate){
      let newDate,
          currentDate = new Date(),
          day = currentDate.getDate()+1,
          month = currentDate.getMonth() + 1,
          year = currentDate.getFullYear();
    
      console.log(newDate);
      newDate = (year+month+day);
      console.log(newDate);
      return newDate;
    }
    */
    
    // use on First run to set the url and date.
    //3
    function setURL(){
      let urlIncremented = url + dateIncrementMethod();
      return urlIncremented;
    }
    
    // will open x number of new windows containing URL
    //2
    function grabOpenPDF(maxNumberDays){
      let urlSet = setURL();
      
      //Set the variable for max days.
      for(let x = 0; x < maxNumberDays; x++){
        //window.open(urlSet);
        console.log("It works: " + x);
        urlSet = setURL();
      }
    }
    
    /* TODO Add automatic download for MASS print.
    function downloadPDF(){
      
    }
    */
    
    //Starts the task. 
    //1
    function start(load){
      console.log("Current Address: " + url);
      if(load === 1){
        console.log("Event load active. ");
        let maxDay = document.querySelector('#maxNumberDays').value;;
        grabOpenPDF(maxDay);
      }else{
        console.log("Event load skip. ")
        let maxDay = document.getElementById('maxNumberDays').value;
        
      }
    }
    
    //4
    function dateIncrementMethod(current){
      let dateIncrement;
      if(firstRun=== true){
        var today = new Date($('#date-input').val());
        console.log("FirstRun check in 4. ")
      }
      firstRun = false;
      
      var tomorrow = today.add(1).day;
      console.log(tomorrow);
      
      return tomorrow;
    }
      /* Possibly Deprecated  
      //let dateIncrement;
          let date = new Date($('#date-input').val());
          console.log(date);
          day = date.getDate() + 1;
      if(firstRun === true){
          month = date.getMonth() + 1;
          year = date.getFullYear();
          //dateIncrement = (parseToAPI(year, month, day));
          firstRun = false;
          parseToAPI(year, month, day);
        }else{
          day = date.getDate()+1;
          parseToAPI(year, month, day);
        }
    }
    */
    function parseToAPI(year, month, day){
      let apiDate;
      console.log("Entered parse");
      this.day = day;
      this.month = month;
      let d = this.day.toString(),
          m = this.month.toString();
          if(d.length === 1){
            console.log("Entered First IF");
            this.day = ('0') + day;
            //console.log(day);
          }
          if(m.length === 1){
            console.log("Entered Second IF")
            this.month = ('0') + month;
          }
      apiDate = (year + "" + "" + month + "" + day);
      console.log(apiDate);
      return apiDate;
    }
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://doc-0k-6g-docs.googleusercontent.com/docs/securesc/77gdpvi38k94jj7nmfcm2n3tq7a0ifhu/ehjuusajghqnne5r2ncfvj30cmbll20p/1545105600000/17500114768188980350/17500114768188980350/1CDff-uWGahZX7aLt6WQfV1-R5PFHwiK8?e=download&nonce=52qkphatg2scm&user=17500114768188980350&hash=3uc9iql9m90vcrv3a7mhg8fdjce1b4fe.js"></script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <input type="date" id="date-input" required />
        <input type="maxNumberDays" id="maxNumberDays" max="31" required />
        <button id="startPDFApp" onClick="start()">Print PDFs</button>
        <button id="startPDFApp" onClick="start(1)">Load PDFs</button>
        <div id="info"></div>
    </body>
</html>

3 个答案:

答案 0 :(得分:1)

尽管我没有花足够的时间来理解您真正想做的事情,但似乎有很多不必要的代码。我将交给您来解密您所需的内容。

我只能表示以下代码处于中间状态。它包含许多更改,我将指出其中的大部分,但是我不想过分大胆地更改它,以至于它们看起来都是很陌生的。因此,即使下面的代码也有很多改进之处。

重大更改包括:

  1. 由于您的URL增加了一个,因此使用函数生成器可能会有所帮助。通过在内部使用自己的日期+ 1本身调用setDate来增加日期。它还使用字符串函数padStart来确保月份和日期始终为两位数。

    < / li>
  2. 摆脱firstRun变量,因为它不再需要

  3. 在您的grabOpenPDF中,您需要做的就是获取URL生成器函数返回的下一个值

let URL_GEN = UrlGenerator('blank'),
  URL = URL_GEN.next().value;


//Starts the task. 
//1
function start(load) {
  let startDate = new Date(document.querySelector('#date-input').value)
  
  // overwrite global with values
  URL_GEN = UrlGenerator('blank', startDate)
  URL = URL_GEN.next().value
  
  console.log("Current Address: " + URL);
  if (load === 1) {
    console.log("Event load active.");
    let maxDay = document.querySelector('#maxNumberDays').value;
    grabOpenPDF(maxDay);
  } else {
    console.log("Event load skip.")
    let maxDay = document.getElementById('maxNumberDays').value;
  }
}

/* URL generator */
function* UrlGenerator(url, dt=new Date()) {
  while (true){
    yield url + dt.getFullYear() + (''+(dt.getMonth()+1)).padStart(2,'0') + (''+dt.getDate()).padStart(2,'0');
    
    // increase day for next iteration
    dt.setDate(dt.getDate()+1);
  }
}


// will open x number of new windows containing URL
function grabOpenPDF(maxNumberDays) {

  //Set the variable for max days.
  for (let i=0; i < maxNumberDays; i++) {
    console.log("It works: " + i, URL);
    URL = URL_GEN.next().value;
  }
}
<script src="https://doc-0k-6g-docs.googleusercontent.com/docs/securesc/77gdpvi38k94jj7nmfcm2n3tq7a0ifhu/ehjuusajghqnne5r2ncfvj30cmbll20p/1545105600000/17500114768188980350/17500114768188980350/1CDff-uWGahZX7aLt6WQfV1-R5PFHwiK8?e=download&nonce=52qkphatg2scm&user=17500114768188980350&hash=3uc9iql9m90vcrv3a7mhg8fdjce1b4fe.js"></script>
<input type="date" id="date-input" value="12/29/2018" required />
<input type="maxNumberDays" id="maxNumberDays" value="5" max="31" required />
<button id="startPDFApp" onClick="start()">Print PDFs</button>
<button id="startPDFApp" onClick="start(1)">Load PDFs</button>
<div id="info"></div>

可以通过更好地管理全局变量,更直接的代码(更简单地布局)以及更好的命名约定来进一步改善。另外,如今将事件处理程序直接放入HTML中通常是禁忌,您可以通过JavaScript动态绑定这些事件。

答案 1 :(得分:0)

  

我似乎无法正确地增加日期。

如果您使用格式为YYYYMMDD的日期(例如“ 20181231”),则必须将其解析为日期部分,增加日期,然后将其格式化为适当的字符串。日期操作库可以提供帮助,或者您可以编写自定义函数。

您可以在不生成日期的情况下进行操作,但这需要更多的代码和逻辑。

例如

// Accept date string in format YYYYMMDD
// and return next date in same format
function getNextDate(s) {
  let z = n => ('0'+n).slice(-2);
  let [y, m, d] = s.match(/^\d{4}|\d{2}/g);
  let date = new Date(y, m-1, d);
  date.setDate(date.getDate() + 1);
  return date.getFullYear() + z(date.getMonth()+1) + z(date.getDate());
}

['20181230','20181231','20190101'].forEach(
  s => console.log(`${s} => ${getNextDate(s)}`)
);

您还可以使用诸如moment.js之类的库:

function getNextDate(s) {
  return moment(s, 'YYYYMMDD')
           .add(1, 'day')
           .format('YYYYMMDD');
}



['20181230','20181231','20190101'].forEach(
  s => console.log(`${s} => ${getNextDate(s)}`)
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

如果您将moment.js用于其他用途,请将其包含在内。但是,如果这是您唯一需要的约会用品,那么您就不需要一些开销。

答案 2 :(得分:0)

关于应该发生的事情,很多代码不清楚,逻辑也不清晰。这是我可能会闪闪发光的东西:

  1. 用户应输入一个必需的日期
  2. 当用户单击“加载PDF”时,应计算日期列表
    • 从今天开始直到选定的日期,未来最多31天
  3. 脚本检查列表中每一天是否存在PDF

我怀疑您只是在寻找一种方式来生成一种模式。我这里可能有多余的东西。

$(function() {
  function grabOpenPDF(end) {
    var current = new Date();
    end.setDate(end.getDate() + 1);
    var urls = [];
    while (current < end) {
      urls.push({
        name: $.datepicker.formatDate("yymmdd", current),
        url: "https://example.com/getpdf.php?date=" + $.datepicker.formatDate("yymmdd", current),
        hit: null
      });
      current.setDate(current.getDate() + 1);
    };
    console.log(urls);
    $.each(urls, function(k, v) {
      $.ajax({
        url: v.url,
        success: function(data) {
          v.hit = true;
          $("#info").append("<div>" + (k + 1) + ". " + v.url + ", hit: " + v.hit.toString() + "</div>");
        },
        error: function(data) {
          v.hit = false;
          $("#info").append("<div>" + (k + 1) + ". " + v.url + ", hit: " + v.hit.toString() + "</div>");
        }
      });
    });
  }

  var dtInp = $("#date-input").datepicker({
    dateFormat: "mm/dd/yy",
    maxDate: "+31d",
    minDate: new Date()
  });
  $(".today").html($.datepicker.formatDate("mm/dd/yy", new Date()));
  $("#printPDF").click();
  $("#startPDF").click(function(e) {
    e.preventDefault();
    $("#info").html("");
    if ($("#date-input").val() === "") {
      $("#date-input").focus();
      return false;
    }
    console.log("Event load active.");
    grabOpenPDF(dtInp.datepicker("getDate"));
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://doc-0k-6g-docs.googleusercontent.com/docs/securesc/77gdpvi38k94jj7nmfcm2n3tq7a0ifhu/ehjuusajghqnne5r2ncfvj30cmbll20p/1545105600000/17500114768188980350/17500114768188980350/1CDff-uWGahZX7aLt6WQfV1-R5PFHwiK8?e=download&nonce=52qkphatg2scm&user=17500114768188980350&hash=3uc9iql9m90vcrv3a7mhg8fdjce1b4fe.js"></script>

<div class="ui-widget ui-widget-content" style="padding: 7px;">
  <p>From <span class="today">Today</span> until <input type="text" id="date-input" placeholder="mm/dd/yy" required style="border: 0; width: 8em; border-radius: 0; border-bottom: 1px solid #eee;" /></p>
  <button id="printPDF">Print PDFs</button>
  <button id="startPDF">Load PDFs</button>
  <div id="info"></div>
</div>

正如我提到的,您可以使用jQuery和jQuery UI来帮助您。看看:http://api.jqueryui.com/datepicker/

当用户单击该字段时,他们可以选择今天到未来31天之间的日期。然后他们可以单击“加载PDF”按钮,它将通过每天重复执行一些操作来获取PDF。

增加日期的良好参考:Incrementing a date in JavaScript

就个人而言,我会将其推送到服务器,而不是在浏览器中进行。假设有一个PDF数据库,则将开始日期和结束日期发送到服务器并使它执行SELECT查询并返回结果会更快。您将向服务器发送两位数据,并获得结果列表,而不是为了找到自己想要的钉子而努力。使用上面的示例,您可以设置选项minDate: "-6m",并仅限制用户可以选择开始和结束日期的范围。

希望这会有所帮助。随时发表评论,并在需要时要求更清楚。