Passing the google script values to 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.

As I previously suggested, please add a [mcve] to your question showing how you are trying to use `Utilities.formatDate` — Rubén, Jul 22 '19 at 02:15
@Rubén, I edited the code in the question as well as the log result. — GPni, Jul 22 '19 at 02:28
@Rubén, thanks for your help in editing. I guess my question is not answered. Thank you anyway. — GPni, Jul 22 '19 at 02:48
I tried your edited code and this error occured "Cannot find method formatDate(string,string,string)." — GPni, Jul 22 '19 at 03:11
Consider to create a demo spreadsheet just with the values that are taken by you script in order to identify what kind of values they are. Share it with anyone with the link to view only and add the link to the question. Actually, it could be better if you post a new question about how read the values and convert them to `YYYY-MM-dd` format — Rubén, Jul 22 '19 at 04:05
@Rubén, as instructed I posted a new question with almost all the details and stages of what I did, Thank you. https://stackoverflow.com/questions/57139423/disable-the-date-in-the-datepicker-values-from-the-google-sheet-using-google-ap — GPni, Jul 22 '19 at 05:02

Rubén · Answer 1 · 2019-07-22T02:57:19.323

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

I tried your edited code and this error occured "Cannot find method formatDate(string,string,string)." — GPni, Jul 22 '19 at 03:06
@GlennPerey Then the values that are taken from the spreadsheet are strings. You should convert them to Date objects prior passing them as the first argument of `Utilities.formatDate` — Rubén, Jul 22 '19 at 03:58

Passing the google script values to javascript datepicker

1 Answers1