how does onchange function works for date - javascript

So I'm trying some adding date, I thinking that I set my validity to 10 days it add to the current date and if I change the current date to change date, it plus to change date
var $ctrl_newdate = moment($ctrl_DateRequested.val(moment().format('YYYY-MM-DD')));
var $ctrl_plusdate = $ctrl_newdate.add(10,'days').format('DD/MM/YYYY');
$ctrl_DateRequested.val(moment().format('YYYY-MM-DD'));
$ctrl_ValidityDate.val($ctrl_plusdate);
$ctrl_ReturnDate.val($ctrl_plusdate);
$ctrl_DateRequested.change(function (){
var $ctrl_newdate = moment($ctrl_DateRequested.val(moment().format('YYYY-MM-DD')));
var $ctrl_plusdate = $ctrl_newdate.add(10,'days').format('DD/MM/YYYY');
$ctrl_DateRequested.val(moment().format('YYYY-MM-DD'));
$ctrl_ValidityDate.val($ctrl_plusdate);
$ctrl_ReturnDate.val($ctrl_plusdate);
});
The adding the date is working but the change is not

Not sure if change is a valid function. Try using
processDates();
$ctrl_DateRequested.addEventListener('change', e => {
processDates();
});
Also avoid duplicating code. You can create a function to do this task.

thank you for the answers, I already fixed the code
here's the code
var $ctrl_DateRequested = $('[name = ctrl_Textbox_lgog5]');
var $ctrl_ValidityDate = $('[name = ctrl_Textbox_wag79]');
var $ctrl_ReturnDate = $('[name = ctrl_Textbox_cg71z]');
var $ctrl_newdate = moment($ctrl_DateRequested.val(moment().format('YYYY-MM-DD')));
$ctrl_DateRequested.on('change',function(){
var date = $(event.target).val();
$ctrl_ValidityDate.val(moment(date).add(10,'days').format('DD/MM/YYYY')) ;
$ctrl_ReturnDate.val(moment(date).add(10,'days').format('DD/MM/YYYY')) ;
});

Related

Date doesnt work - tag value in setFullYear

var d = new Date();
var gunler= ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"];
document.getElementById("gun").innerHTML = gunler[d.getDay()];
var ic = document.getElementsByClassName("i");
var dis = document.getElementsByClassName("d");
var ll = document.getElementById("seciligun");
var ll2 = ll.innerHTML;
alert(ll2);
d.setFullYear(ll2);
var a=0;
while(a<ic.length){
if(gunler[d.getDay()]=="Cumartesi"||gunler[d.getDay()]=="Pazar"){
ic[a].innerHTML="";
}
else{
dis[a].innerHTML="";
}
a=a+1;
}
I using these codes in my js file , i taking date in my div tag that id = seciligun. When i use alert it seems like this : 2020-08-15 but when i say alert(d) , browser saying "invalid date". If i write like this d.setFullYear(2020-08-15) everything works correctly but i need use tag's value that id = seciligun.
You need to extract the year from ll2.
var y = ll2.split('-')[0];
d.setFullYear(y);

Compare Google sheet dates to Google Calendar Event date

Matching dates from Sheet and Google Calendar is always false, how can I format the two dates to compare?
I've attemped to format the dates even if they look exactly the same it comes back false.
var Sheet_StartDate = Spreadsheet.getActiveSheet().getRange(1,1).getValue();
var calendar = CalendarApp.getCalendarById('####');
var event = calendar.getEventById(eventId);
var calendar_StartTime;
try {
// Get all day event
calendar_StartTime = event.getAllDayStartDate();
}
catch (e) {
//Multi-day event
calendar_StartTime = event.getStartTime();
}
if (calendar_StartTime === Sheet_StartDate )
{
//This comes back false
}
Try this:
function compareDates() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getActiveSheet();
var dt=new Date(sh.getRange(1,1).getValue());
var Sheet_StartDate_value=new Date(dt.getFullYear(),dt.getMonth(),dt.getDate()).valueOf();//This removes the time portion
var calendar = CalendarApp.getCalendarById('####');
var event = calendar.getEventById(eventId);
dt=new Date(event.getAllDayStartDate());
var calendar_StartTime_value=new Date(dt.getFullYear(),dt.getMonth(),dt.getDate()).valueOf();
if(calendar_StartTime_value == Sheet_StartDate_value ) {
//This will come back true if in fact they are the same date
}
}
You can also use Date().getTime()

Jquery AutoFormat/Complete for Date

I'm searching for something similar to this: https://github.com/7shifts/jQueryTimeAutocomplete
But instead of time, I need some autocompletion/formatting for date.
Example: Do you type 23/9, and it's auto format to timestamp format 2014-09-23
Do you know anything?
did it like this.
$("#date").focusout(function(){
var val = $(this).val();
var pieces = val.split('/');
if(!pieces[2]){
pieces[2] = new Date().getFullYear();
}
pieces[1] -= 1;
console.log(pieces[2]);
$(this).val($.datepicker.formatDate('yy-mm-dd', new Date(pieces[2], pieces[1], pieces[0])));
});

Preferred Method to (Accurately) Get Time From User Input (in UiApp - GAS)

UiApp has DateBox and DateTimeFormat
for that Class. However, there is no such thing as TimePicker or TimeBox, where a user could enter a time in a well-specified manner such as through using Google Forms:
Forms has different behavior for this Widget in Chrome vs Firefox (I much prefer the Chrome behavior). Anyway, currently I am using a TextBox to get time values, where someone would enter a time value in the following manner:
12:00 or 13:50, etc. These times would be in the 24-hour clock so that I could create new Date objects based on someDate + " " + startTime, which would act as the real start time for an event on the Calendar (this is the process I currently use in several of my applications at work). This is obviously unreliable for several reasons.
Ex: If the user entered anything except a valid 24-hour representation in HH:MM:SS, Date creation would fail.
I don't want to force my boss to be overly-precautious about how he inputs times into the UI, and I also want to avoid regexing "valid" formats and having the UI do a lot of back-end work (it would be 18 regex tests total, and if any failed I'd have to handle them individually).
So, the question: is there an efficient/preferred method of getting times in UiApp, either via TextBox or some other interface?
What about something like that ? Test app here (updated with new version, see edit)
code below :
function doGet() {
var app = UiApp.createApplication().setTitle('enter time');
var frame = app.createVerticalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'15px'});
var handler = app.createServerHandler('setTime').addCallbackElement(frame);
var h = app.createListBox().setId('h').setName('h').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
for(var n=0;n<12;n++){h.addItem(Utilities.formatString('%02d', n),n)}
var m = app.createListBox().setId('m').setName('m').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
for(var n=0;n<60;n++){m.addItem(Utilities.formatString('%02d', n),n)}
var am = app.createListBox().setId('am').setName('am').setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
am.addItem('AM').addItem('PM');
var date = app.createDateBox().setValue(new Date()).setFormat(UiApp.DateTimeFormat.DATE_LONG).setName('date').addValueChangeHandler(handler);
var label = app.createHTML('<b>StartTime *</b><br>When your reservation starts').setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'padding-bottom':'10px'});
var subFrame = app.createHorizontalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'5px'});
var result = app.createHTML().setId('date').setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'color':'#AA6','padding-top':'20px'})
.setHTML(Utilities.formatDate(new Date(new Date().setHours(0,0,0,0)), Session.getTimeZone(), 'MMM-dd-yyyy HH:mm'));
frame.add(date).add(label).add(subFrame).add(result);
subFrame.add(h).add(m).add(am);
return app.add(frame);
}
function setTime(e){
var app = UiApp.getActiveApplication();
var date = app.getElementById('date')
var date = new Date(e.parameter.date);
var am = e.parameter.am
if(am=='AM'){am=0}else{am=12};
var h = Number(e.parameter.h)+am;
var m = Number(e.parameter.m);
date.setHours(h,m,0,0)
Logger.log(date);
app.getElementById('date').setHTML(Utilities.formatDate(date, Session.getTimeZone(), 'MMM-dd-yyyy HH:mm'));
return app
}
EDIT : here is the wrapped version and a demo with a grid and 10 panels.
function doGet() {
var app = UiApp.createApplication().setTitle('enter time');
var grid = app.createGrid(10,2)
var handler = app.createServerHandler('setTime').addCallbackElement(grid);
var varName = 'date';
var htmlString = '<b>StartTime *</b> When your reservation starts'
for(var idx=0 ; idx<10;idx++){
var frame = pickDate(idx,varName,htmlString,handler);
grid.setText(idx, 0, 'test widget '+idx+' in a grid').setWidget(idx,1,frame);
}
var result = app.createHTML('<h1>Click any widget</h1>').setId('result');
return app.add(grid).add(result);
}
/* wrapped version
** takes a var name + index + label string + handler
** as input parameter
** The same handler will be used for every occurrence , the source being identified in the handler function (see code example below)
** and returns a selfcontained widget that you can add to a panel or assign to a grid
** or a flex Table
*/
function pickDate(idx,varName,htmlString,handler){
var app = UiApp.getActiveApplication();
var frame = app.createVerticalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFD','padding':'1px', 'border-radius':'5px'});
var h = app.createListBox().setId('h'+idx).setName('h'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
for(var n=0;n<12;n++){h.addItem(Utilities.formatString('%02d', n),n)}
var m = app.createListBox().setId('m'+idx).setName('m'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
for(var n=0;n<60;n++){m.addItem(Utilities.formatString('%02d', n),n)}
var am = app.createListBox().setId('am'+idx).setName('am'+idx).setStyleAttributes({'margin':'5px'}).addChangeHandler(handler);
am.addItem('AM').addItem('PM');
var date = app.createDateBox().setValue(new Date()).setFormat(UiApp.DateTimeFormat.DATE_LONG).setId(varName+idx).setName(varName+idx).addValueChangeHandler(handler);
var label = app.createHTML(htmlString).setStyleAttributes({'fontSize':'10pt','font-family':"Arial, sans-serif",'padding-bottom':'3px'}).setId('html'+idx);
var subFrame = app.createHorizontalPanel().setStyleAttributes({'border':'solid 1px #AA6','background-color':'#FFE','padding':'1px', 'border-radius':'4px'});
frame.add(label).add(date).add(subFrame);
subFrame.add(h).add(m).add(am);
return frame;
}
function setTime(e){
// Logger.log(JSON.stringify(e));
var app = UiApp.getActiveApplication();
var idx = Number(e.parameter.source.replace(/\D+/,''));
Logger.log('date'+idx+ ' > '+e.parameter['date'+idx]);
var date = new Date(e.parameter['date'+idx]);
var am = e.parameter['am'+idx];
if(am=='AM'){am=0}else{am=12};
var h = Number(e.parameter['h'+idx])+am;
var m = Number(e.parameter['m'+idx]);
date.setHours(h,m,0,0)
app.getElementById('result').setHTML('<h1>Widget Nr '+idx+' has value '+Utilities.formatDate(date, Session.getTimeZone(), 'MMM-dd-yyyy HH:mm')+'</h1>');
return app
}

create javascript timestamp from innerhtml string values

I'd like to create a javascript timestamp based on a rails date_select and time_select property. I attached an onChange function to the select helper and fetching the innerhtml to read the values into a div which works fine. Now I want to use those strings from the select property and create a timestamp in js (using it for validations).
I did first try this by making integers from the innerhtml values:
function insertText10()
{
var start_day = document.new_link['link[start_at(3i)]'];
var start_month = document.new_link['link[start_at(2i)]'];
var start_year = document.new_link['link[start_at(1i)]'];
var start_hour = document.new_link['link[start_at(4i)]'];
var start_minute = document.new_link['link[start_at(5i)]'];
var selOption1 = start_day[start_day.selectedIndex];
var selOption2 = start_month[start_month.selectedIndex];
var selOption3 = start_year[start_year.selectedIndex];
var selOption4 = start_hour[start_hour.selectedIndex];
var selOption5 = start_minute[start_minute.selectedIndex];
start_date = new Date(parseInt(selOption3.innerHTML),parseInt(selOption2.innerHTML),parseInt(selOption1.innerHTML),parseInt(selOption4.innerHTML),parseInt(selOption5.innerHTML),0,0);
then by using strings:
start_date = new Date(selOption3.innerHTML+selOption2.innerHTML+selOption1.innerHTML+selOption4.innerHTML+selOption5.innerHTML);
but neither works.
What am I doing wrong?
--
PS: I checked the w3s docu http://www.w3schools.com/jsref/jsref_obj_date.asp to find the solution above.
Solved:
start_date = new Date(parseInt(selOption3.value),parseInt(selOption2.value),parseInt(selOption1.value),parseInt(selOption4.value),parseInt(selOption5.value),0,0);

Categories