将Google脚本值传递给JavaScript Datepicker

Question

I have an array of dates which was the result of the function from google app script. I want to place the date results in the disabledDays variable in JavaScript which was for the datepicker which I got from MaterializeCSS.

I have set the initialization of the datepicker in the JavaScript and used the code which Christopher Bradley help me to get the dates which will be disabled. (Related Return the values that occurred multiple times using google apps script )

I have tried to the following codes but still not disabling the dates in the datepicker .

html:

 <div class="row">
 <div class="input-field col s4">
         <input id="subDate" type="text" class="datepicker">
         <label for="subDate">Select Date</label>
 </div> 

This is my initialization for the date picker.

javascript:

<script>

 document.addEventListener('DOMContentLoaded', function() {
   var timeSelect = document.querySelectorAll('select');
   M.FormSelect.init(timeSelect);

   google.script.run.withSuccessHandler(populateDates).revealDates();                            

  });

   function populateDates(disabledDays){
   var disabledDays = [new Date("2019, 12, 25").valueOf(), new Date("2019, 7, 18").valueOf()];
   var dateSelect = document.getElementById('subDate');
   M.Datepicker.init(dateSelect, {
                        minDate: new Date ("2019, 5, 10"), 
                        maxDate: new Date ("2019, 8, 21"), 
                        disableWeekends: true,
                        disableDayFn: function(day){
                           return disabledDays.indexOf(day.valueOf()) > -1;
                        }
                        });

   }
</script>

then here is the google script function which I got from Christopher Bradley.

google script:

function revealDates(){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Test_Data");
  var dateRg = ws.getRange(1, 9, ws.getLastRow(), 1).getValues();

  var CheckLimitReached = function (T)
  {
   var records= {};
   T.forEach(function (x) { records[x] = (records[x] || 0) + 1; });
   var limit_reached = Object.keys(records).filter(function (R) {
   return records[R] >= 5;});
   return limit_reached;
  };

 var dateDisable = CheckLimitReached(dateRg);
 var testDate = Utilities.formatDate(new Date (dateDisable.valueOf()), "GMT+8","yyyy, MM, dd");
 Logger.log(testDate);
 //return dateDisable;

}

this is the result of the log:

 [19-07-22 10:26:49:100 HKT] 1970, 01, 01

I want to send the dates which is the result (see log) from the Google Script to the disabledDays array in the JavaScript to disable the date selection in the datepicker . I'am really in need of help. I've been trying to search and figure out what to do but no success. I'll really appreciate all the help.

Answer 1

I think that you should take some steps back, even maybe you should start from scratch as it looks that you still doesn't understand some Google Apps Script / JavaScript basic concepts like data types and how the Date constructor works.

The Date constructor, new Date() , could have an argument but it should not be an Array object. In the expression new Date (dateDisable.valueOf()) you are passing one. For details about the valid arguments for the Date constructor see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Assuming that dateDisable members are Date objects, in order to make your code log dates as strings with the required format, replace:

var testDate = Utilities.formatDate(new Date (dateDisable.valueOf()), "GMT+8","yyyy, MM, dd");
 Logger.log(testDate);

by:

for(var i = 0; i < dateDisable.length; i++){
  var testDate = Utilities.formatDate(dateDisable[i], "GMT+8","yyyy, MM, dd");
  Logger.log(testDate);
}

---

Since you input is use type="text" your Google Apps Script should pass the date as a text string with the following format YYYY-MM-dd .

For this you could use Utilities.formatDate(date,timezone,format)

Reference

• https://developers.google.com/apps-script/reference/utilities/utilities#formatdatedate-timezone-format