Datepicker:禁用数据中的日期 [英] Datepicker: Disabling dates in the data

问题描述

我有一个日期选择器，该日期选择器从现在开始(开始)到滚动的12周(结束)启用3周.我想添加一个条件，如果该跨度上的日期已经在data(Spreadsheet)中，那么它也将被禁用.参见下面的脚本:

I have a datepicker which enables 3weeks from now(start) up to the rolling 12weeks(end). I would like to add a condition that if the date on that span was already in the data(Spreadsheet) it will also be disabled. See script below:

 <script>

   var data = SpreadsheetApp
        .openById('Spreadsheet ID')
        .getSheetByName("VL Request")
        .getDataRange()
        .getValues();  
   var datefiled = [0];
   var userName = Session.getEffectiveUser().getUsername();


      $( function() {
      //enable next week onwards 
    var date = new Date();
    var weekday = date.getDay();
    var daysTillWeekOver = 21 - weekday;
    var enddayofweek = daysTillWeekOver + 5;
        $("#datepicker").datepicker({
      minDate:daysTillWeekOver,
      maxDate: "3M" + enddayofweek
      });
      } );
</script>

我想添加一个条件，即如果用户在该日期提交(日期归档)，它将在该用户的日期选择器上被禁用，因此该用户将避免在该日期提交重复记录.

I want to add a condition that if the user filed for that date(datefiled) it will be disabled on the datepicker for that user so the user will avoid filing a duplicate on that date.

推荐答案

您希望限制Jquery datepicker以排除用户先前选择的日期 .这意味着要排除的日期在每次使用脚本时可能有所不同.

You want to limit a JQuery datepicker to exclude dates previously chosen by the user. This means that the dates to be excluded may vary on each use the script .

主题如何在jQueryUiDatepicker中使用BeforeShowDay禁用特定的日期和日期?(@Amal的道具)表明datepicker脚本需要简单的日期数组.但是，我发现，每个使用的示例都假定将排除的日期硬编码到脚本中.在这种情况下，由于用户的可变性以及因此用户先前选择的日期的差异，这是不可接受的.

The topic How To Disable Specific Days and Dates Using BeforeShowDay In jQueryUiDatepicker? (props to @Amal) show that the datepicker script requires a simple array of dates. However I found that every example showing the use of BeforeShowDay assumes that the excluded dates are hard-coded into the script. This is unacceptable in your scenario because of the variability of the user and consequently the dates previously selected by the user.

以下是一个完整的Web应用程序，该应用程序将获取电子表格数据并搜索用户名的实例，获取相关的VL日期，将日期推送到Web应用程序读取的数组，然后由Datepicker拾取并反映在浏览器.

The following is a complete webapp that takes the spreadsheet data and searches for instances of the username, obtains the relevant VL dates, pushes the dates to an array read by the webapp, and then picked up by the Datepicker and reflected in the browser.

排除日期示例

Tanaike的道具和 ZektorH 为他们提出的建议，以设计可将日期数组传递给webapp javascript的方法.

Props to Tanaike and ZektorH for their advice for devising the method to pass the array of dates to be available to the webapp javascript.

链接到网络应用程序

链接到电子表格

注意:脚本假定用户名是"user1".但是有一条注释行(var userName = Session.getEffectiveUser().getUsername())，可用于返回实际用户并根据该用户选择日期.

Note: the script assumes that the user name is "user1". But there is a commented line (var userName = Session.getEffectiveUser().getUsername()) that can be used to return the actual user and select dates based on that user.

要注意的关键事项是:

• DataPicker exclusion的基本代码(在JavaScript.html中)由Amal提出.
• 这包裹在withSuccessHandler中，该withSuccessHandler调用函数getuserdates()(在code.gs中)，该函数返回用户先前选择的日期.

• the basic code for DataPicker exclusion (in JavaScript.html) is that proposed by Amal
• this is wrapped in a withSuccessHandler that calls function getuserdates() (in code.gs) which returns the dates previously selected by the user.

对特定流程的评论

• getuserdates()
• var datasheetData = datasheetRange.getDisplayValues();:所有数据都是从一开始就获得的:
• datasheetRange.sort(6);(基于非零列的F列):数据按日期排序，以使输出按日期顺序排列:
• var datanames = datasheetData.map(function(e){return e[2];});': the list of user names is extracted by using the Javascript [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method . e [2]`将从零开始访问C列或第2列)
• var userdates = [];:已设置一个临时数组以捕获以前的日期
• userdates.push('"' + datasheetData[i][5]+ '"');:脚本以用户名的名义循环，与运行脚本的用户名匹配，并将相关的VL日期提取到临时数组中.
• datasheetRange.sort(1);:电子表格数据是通过时间戳记来提取的.
• if (userdates.length !=0){:脚本测试是否捕获了以前的任何日期.
• userdates看起来像这样:["11/11/2019", "11/15/2019", "11/16/2019", "11/17/2019", "11/24/2019"]

• getuserdates()
• var datasheetData = datasheetRange.getDisplayValues();: all the data is obtained at the outset:
• datasheetRange.sort(6); (Column F on a non-zero-based basis): the data is sorted by date to enable the output to be in date order:
• var datanames = datasheetData.map(function(e){return e[2];});': the list of user names is extracted by using the Javascript [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method .e[2]` will access Column C, or column 2 on a zero-based basis)
• var userdates = [];: a temporary array is setup to capture the previous dates
• userdates.push('"' + datasheetData[i][5]+ '"');: the script loops thought the user names, matches on the name of the user running the script, and extracts the relevant VL date(s) to the temporary array.
• datasheetRange.sort(1);: the spreadsheet data is resorted by Timestamp.
• if (userdates.length !=0){: the script tests whether or not any previous dates were captured.
• userdates look like this: ["11/11/2019", "11/15/2019", "11/16/2019", "11/17/2019", "11/24/2019"]

DatePicker

• minDate:开始日期是从今天开始的3周:"+3W"
• maxDate:结束日期是从今天开始的12周:"+12W"
• beforeShowDay:这是排除特定日期的datepicker参数.值userdates是从getuserdates()
返回的
• $thisdate定义日期格式为m/d/y，然后
• if ($.inArray($thisDate, userdates) == -1) {:使用JQuery inArray 方法测试数组日期是否相等到日历日期；如果不匹配，则返回-1.因此，进行匹配时，该函数将返回"false" = 0，并且日历中的日期为灰色/模糊".

• minDate: start date is 3 weeks from today: "+3W"
• maxDate: end date is 12 weeks from today: "+12W"
• beforeShowDay: this is the datepicker parameter for exclusion of specific dates. The values userdates are returned from getuserdates()
• $thisdate defines a date format of m/d/y, and then
• if ($.inArray($thisDate, userdates) == -1) {: uses the JQuery inArray method to test for the array date equal to the calendar date; if there is no match, it returns -1. So, when a match is made, the function returns "false" = 0 and the date is "greyed out/blurred" in the calendar.

code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getuserdates() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheetname = "VL Request";
  var datasheet = ss.getSheetByName(sheetname);

  // assume user name
  //var userName = Session.getEffectiveUser().getUsername()
  var username = "user1";

  // set variables
  var datafirstrow = 2;
  var dataLR = datasheet.getLastRow();
  var dataLC = datasheet.getLastColumn();
  var datasheetRange = datasheet.getRange(datafirstrow,1, dataLR-datafirstrow+1, dataLC);
  //Logger.log(datasheetRange.getA1Notation());

  // sort the data by date
  datasheetRange.sort(6); // sort by Column F - VL date
  var datasheetData = datasheetRange.getDisplayValues();
  //Logger.log(datasheetData);

  //   get the user names as an array
  var datanames = datasheetData.map(function(e){return e[2];});//[[e],[e],[e]]=>[e,e,e]
  //Logger.log(datanames); // DEBUG
  //Logger.log(datanames.length) // DEBUG

  // create an array to hold any dates
  var userdates = [];

  //  loop through the user names; test for equivalence to "username", and save VF date to an array
  for (var i=0;i<datanames.length;i++){
    //Logger.log("dataname = "+datanames[i])
    if (datanames[i] === username){
      // Logger.log("DEBUG: i= "+i+", user name = "+datanames[i]+", VL date = "+datasheetData[i][5]);
      //userdates.push('"' + datasheetData[i][5]+ '"');
      userdates.push(datasheetData[i][5]);
    }
    else{
      // Logger.log("DEBUG: i= "+i+" - no match");
    }
  }
  // resort the data by Timestamp
   datasheetRange.sort(1); // sort by Column A

  if (userdates.length !=0){
  //Logger.log("There are "+userdates.length+" previous dates for this user.");//DEBUG
  }
  else{
  //Logger.log("There no previous dates for this user");//DEBUG
  }

  //Logger.log(userdates);
  return userdates;
}

---

JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
// Tanaike - Pattern2
// https://stackoverflow.com/a/58811576/1330560
google.script.run.withSuccessHandler(userdates => {
//console.log(userdates);
  $(function() {
    $('#datepicker').datepicker({
      minDate: "+3W", 
      maxDate: "+12W",
      beforeShowDay: function (date) {
        $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
        if ($.inArray($thisDate, userdates) == -1) {
          return [true, ""];
        } else {
          return [false, "", "Unavailable"];
        }
      }
    });
  });
}).getuserdates();
</script>

---

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
  <?!= include('JavaScript'); ?>
</body>
</html>

---

Stylesheet.html

<style>
.demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt } 
p { color : red ; font-size : 14pt } 
</style>

这篇关于Datepicker:禁用数据中的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！