We Keep Coding

Disable dates in the datepicker based on values from the Google Sheet using Google Apps Script

From the html I made with date picker, if a date was selected and submitted, it's output will be saved in the Google Sheet.
Here is the sample output:
here is the html code:
<div class="row">
<div class="input-field col s4">
<input id="subDate" type="text" class="datepicker">
<label for="subDate">Select Date</label>
</div>
and here is the datePicker sample:
As you have noticed there are some disabled dates in the calendar. It is due to the option in the following java script:
<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>
I wanted to disable the repeating dates in the google sheet if it reaches 5 times in the column. In the example output above, you will notice:
August 20, 2019
July 26, 2019
July 19, 2019
Exist 5 times in the column. Now, to get only the values which exist 5 times, I used the code which I got from #Christopher Bradley
Google Apps 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);
Logger.log(dateDisable);
return dateDisable;
}
the log of this code is:
I want to disable the dates of the following log/ result. And to disable it, I think I need to place it in the disabledDays array in the javascript. I used
google.script.run.withSuccessHandler(populateDates).revealDates();
But still I can't disable the dates. I thought it should be in the format of
new Date("2019, 12, 25").valueOf()
and #Rubén gave this code:
for(var i = 0; i < dateDisable.length; i++){
var testDate = Utilities.formatDate(dateDisable[i], "GMT+8","yyyy, MM, dd");
Logger.log(testDate);
}
since it resulted in an error I tried to make this:
var testDate = Utilities.formatDate(new Date(dateDisable[i]), "GMT+8","yyyy, MM, dd");
and logging it the result is:
Still, I can't disable the date in the datepicker.

You want to disable the dates of weekends and the dates retrieved from the values of Spreadsheet for the datepicker.
In your sample Spreadsheet, you want to disable August 20, 2019, July 26, 2019, July 19, 2019 and the weekends.
If my understanding is correct, how about this modification? Please think of this as just one of several answers.
Modified script:
Please modify the function of populateDates() of HTML & Javascript side as follows.
function populateDates(disabledDays){
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){ // Modified
return disabledDays.some(e => {
var obj = new Date(e);
return obj.getFullYear() == day.getFullYear() && obj.getMonth() == day.getMonth() && obj.getDate() == day.getDate();
});
}
});
}
Note:
In this case, the values of disabledDays from revealDates() of Google Apps Script are the string values. So the string values are converted to the date object at the script of disabledDays = disabledDays.map(e => new Date(e)).
In this modification, I didn't modify Google Apps Script.
Reference:
some()

JavaScript to show <div> after a certain date

I believe this is a relatively simple question (a JavaScript noob here), but I can't seem to find a thread for this particular date function. I am doing website migration for an academic society from a PHP-based site to a drupal CMS. Some of the PHP has obviously broken and I'm trying to replace simple scripts with Javascript. One issue that is giving me a lot of trouble is how to get a text to appear only AFTER a certain date. In PHP my functioning code is:
<?php if (date('YmdH') > 2018011710 ) { ?>
<p class="error">Please note that the deadline for submitting proposals has passed.</p>
<?php } ?>
So I need something in JavaScript to do the same. Here is what I came up with (I apologize in advance for my sloppy code as I'm a beginner with JavaScript):
First CSS to hide the DIV:
<style type="text/css">
.DateDiv { display: none;}
</style>
Then the div itself:
<div class="DateDiv">
<h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>
Finally, my JavaScript, which is not working:
<script>
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
// show only if current date is after January 16, 20018
if (today > 0, 16, 2018) {
$(".DateDiv").show();
}
});
</script>
If anyone could help me sort this out I would be very grateful. If I'm going about this in a manner that is more complicated than it needs to be I'd also appreciate any advice.
Thanks in advance.
PS: I am not asking to compare two dates, but to display a text after a certain date.

you just might want to do something like this:
if (new Date() >= new Date(2018, 0, 16))
months always start at 0 while days start at 1. don't ask why.
this is how the constructor is defined:
new Date(year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]);
just go here for in-depth details about Date()

//show only if current date is after January 16, 20018
var date_to_check_with = new Date("20180116").getTime();
//.getTime() will give time in milliseconds (epoch time)
var current_date = new Date().getTime();
console.log(date_to_check_with < current_date);

Warp.js date starting from previous date

This script using warp.js works great starting from the current date. I can't seem to figure out how to get it to work starting from a previous date like Jan 2nd, 1986?
warp.js
https://github.com/mattbradley/warpjs/blob/master/README.md
Thanks!
<body>
<script src="warp.js"></script>
<div id="container"></div>
<span id="info"></span><br>
<span id="time"></span>
<span id="time2"></span>
<script>
setInterval(function() {
//specify a start date here like Jan 2 1986
Date.warp.speed(3);
var now = new Date;
//new date put out the warped start date above?
var dateD = [now.getMonth() + 1, now.getDate(), now.getFullYear()];
var dateE = [now.getHours(), now.getMinutes(), now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 1000);
</script>
</body>
</html>

I figured this out. You have to use the clock() function so set your custom date, and it will then warp from that custom date.
Date.warp.clock(customDate);

Cookie (document.cookie)

Iep, i have a problem, its the first time that im working with cookies and i was trying to save them.
The question is that only the 2 first values are saved, in this case "nombre" and "tuValor". If i do "alert(document.cookie)" the other values dont apear.
<script type="text/javascript">
function guardar() {
Nombre = "Empire";
tuValor = "F"+food;
tuValor2 = "w"+wood;
caduca = "31 Dec 2020 23:59:59 GMT";
document.cookie = Nombre+"="+tuValor+tuValor2+"expire= "+caduca ;
}
</script>

You forgot the semicolon before expire.
It goes like this:
document.cookie="my_cookie=empireWh4t3v3r;expires=Thu, 23 Apr 2020 15:37:15 GMT;"

Date format for bootstrap datepicker

Hi i am using bootstrap datepicker. I need to get the value from datepicker text box in the format like date-month-year to my controller but presently i am getting values like
Tue Oct 01 00:00:00 IST 2013
I have tried formatting date but still i am getting same result . I have tried like below
$(function() {
window.prettyPrint && prettyPrint();
$('#birthday').datepicker({
format: "DD, d MM, yy"
})
});

If the format attribute is not working. You can try something similar to this:
var dt = $('#dt').datepicker({format:'dd/mm/yyyy'}).on('changeDate', function(ev) {
var newDate = new Date(ev.date);
var year = newDate.getFullYear();
var month = (newDate.getMonth()+1);
var day = newDate.getDate();
dt.setValue(day+'-'+month+'-'+year);
dt.hide();
}).data('datepicker');
You are formatting your date by yourself.
You can ignore the format attribute.