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);

hide javascript dates in table

i have a form where the previous dates from today must be hidden in the first date picker and the second date picker must not show dates previous to the first selected date.
Date picker one
Date picker two
The form is working for the first row but i can't get the code to work for the other rows that follow when i "add" a new row.
Can anyone assist me with this Please?
here is my current code :
$(document).ready(function(){
function updateMinimumEndDate ()
{
var minimum = $('.DepartDate input').val();
var minSplit = [];
minSplit = minimum.split("/");
var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
$('.ReturnDate input').attr('min',newMin);
}
$('.DepartDate input').change(updateMinimumEndDate);
});
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var minDate = (year +"-"+ month +"-"+ day);
$('.DepartDate input').attr('min',minDate);
});
});

The problem is with the line
$('.DepartDate input').change(updateMinimumEndDate);
This needs to be in docReady. It also needs to use the jQuery function .on so that it will be triggered for new rows as they are added. I haven't checked this:
$('.DepartDate input').on('change', 'AnchorSelector', function() {updateMinimumEndDate())};
where AnchorSelector is a location which contains your form.

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.

find out if I am 20 years before I can sustain myself on the side

I have sat and work with a small jquery sciprt to specify the speed at which age and whether you can get laws to create a user.
<script type="text/javascript">
$(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
$.datepicker.setDefaults( $.datepicker.regional[ "da" ] );
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '1950:'+yyyy,
maxDate: new Date(yyyy, mm, dd),
onSelect: function(value, ui) {
var dob = new Date(value);
var age = new Date(today - dob).getFullYear() - 1970;
$('#age').html(age+' år gammel');
// alders kontrol
var status = (age<20)? true: false;
$('#msg').html( (! status )? '': 'Kan ikke opret dig!' );
$("input[type=submit]").attr("disabled", status);
}
});
});
from present day and 20 years behind you can not select a date that it must be so. For example if I am 19 years today and I will be 20 tomorrow so I can first create me in the morning then you will see it.
so it must first come forward and find out whether you can create on the site, if you are over 20 years must go on to say how old you are,
The problem: is that it shows all years and dates and months from today back to 1950.
it must take yearling away from today and 20 years behind all of 1993, the last year be promoting. so it should be like that all the time you have to be 20 years before you have to register on the site.

Change
maxDate: new Date(yyyy, mm, dd),
to
maxDate: new Date(yyyy-20, mm, dd),
Demo here