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

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

I want to convert string "var=02-24-2013 12:40:00.0 into a java script date object?

<span id="datePickerSpan${email.id}">
<g:formatDate date="${scheduleDate}" format="dd-MM-yyyyHH:mm"/>
</span>
<input type="text" id="datePicker${email.id}" style="display:none"/>
<span onclick="openDateTimePicker('${email.id}')"></span>
<g:javascript>
var str='${scheduleDate}';//2013-02-2412:40:00.0
str = str.replace(/(\d{2}:\d{2}:\d{2}).*$/g, '$1');
alert("Str is=> "+str);//2013-02-24 12:40:00
var date2=new Date(str);
alert(" yy dd mm alert"+date2);//invalid date object
str = str.replace(/^(\d{4})-(\d{2})-(\d{2})/g, '$2-$3-$1');
alert("now new Str is =>"+str);//02-24-2013 12:40:00.0
var date=new Date(str);
alert("now str date is =>"+date);//invalid date object
var date1=new Date();
alert("java script date is =>"+date1);//Wed Feb 13 2013 11:16:55 GMT+0530 (India Standard Time)
$('#datePicker${email.id}').datetimepicker({
dateFormat: 'dd-mm-yy',
timeFormat: 'HH:mm',
minDateTime: new Date(),
maxDateTime:null,
defaultDate:new Date(),
showOn: "button",
buttonImage: requestPath + "/images/calendar.gif",
buttonImageOnly: true,
onSelect : function(dateText,obj){
saveRescheduleDate(${email.id},dateText);
}
});
</g:javascript>

JavaScript Date object is created with new Date().:
new Date("02-24-2013 12:40:00.0");

you can declare Date object like this
var dt= new Date("October 13, 1975 11:13:00")
try this link for more reference
http://www.w3schools.com/js/js_obj_date.asp

Help with jquery datepicker calendar date disabling

I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.

You mean valueOf(), not getTime().