create javascript timestamp from innerhtml string values - javascript

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

Related

how does onchange function works for date

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

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

Calculate age based on birthday with JQuery

I am trying to calculate how old a person is with jQuery. I tried using this code but I am not getting any results. I assume that I cannot but a varible in date(). What could I do to make this work?
<p id="age">2015/01/01</p>
var ptag = $('#age');
var birthdate = new Date(ptag);
var cur = new Date();
var diff = cur-birthdate;
var age = Math.floor(diff/31536000000);
alert(age);

You need to get the contents of the #age element, not the element itself.
var ptag = $('#age').text();

var age = new Date() - new Date($('#age').text());
age /= 31536000000;
$(selector).text() will return the content of a DOM element as a text.
And since we do not want to use a bunch of variables, we simply define one, as the difference of two dates: the 'now' minus the one from the text.
And since the above is in miliseconds, we devied it... and that will return age in years.
jQuery .text()

Having trouble converting user input into a graphic bar

The code seems to work fine when inputting numbers 1-9 but anything above doesn't work, what could be the issue? Here is the code:
var varkString = prompt('Enter your VARK scores - [visual|aural|read|kinesthetic]','9|3|11|10');
var subStrings = varkString.split('|');
var visual = varkString[0];
var aural = varkString[1];
var read = varkString[2];
var kinesthetic = varkString[3];
var varkBar = 30*visual
document.writeln('<img src="bar_blue.png" width='+varkBar+' height="25"/>');{
}
Edit: Solved

You are parsing first character when you are getting visual, second on aural and third on read.
I belive that you want to use subStrings
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];

when you are slpiting the string varkString the array will automatically constructed and assigned to subStrings.so use it like this:
var subStrings = varkString.split('|');
var visual = subStrings[0];
var aural = subStrings[1];
var read = subStrings[2];
var kinesthetic = subStrings[3];

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
}

Categories