How to set a default date in html? [duplicate] - html

This question already has answers here:
How to set input type date's default value to today?
(43 answers)
Closed 9 years ago.
I am editing a HTML file and there is one attribute application deadline. How can I set a default value to the application deadline to one year after today in the html code? Thanks for helping
Below is the original HTML code
<div class="field" >
Application Deadline:
<input type="date" id="id_application_deadline" name="application_deadline">
</div>>

This is not possible without java script, Try this
<script language="javascript">
<!--
today = new Date();
document.write("", today.getDate(),"/",today.getMonth()+1,"/",today.getYear());
//-->
</script>

Just set the desired date as value attribute:
<input type="date" id="id_application_deadline" name="application_deadline" value="2013-05-29">
If you're only using html, without javascript, there won't be a way to calculate the 1 year offset i think.

try this
<head>
<script type="text/javascript">
function onload()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
yyyy = parseInt(yyyy) + 1;
today = dd+'-'+mm+'-'+yyyy;
document.getElementById("id_application_deadline").value = today;
}
</script>
</head>
<body onload="onload()">
<div class="field" >
Application Deadline:
<input type="text" id="id_application_deadline" name="application_deadline">
</div>
</body>

Related

Modifying an existing Calendar Event from HtmlService input

I'm trying to add a "Sign Up" link to a Google Calendar Event where upon clicking the user is prompted via HtmlService to submit their email address. Their email address is then added to the event.
Here's a similar example. What I'd like to do differently is use HtmlService to have the user input their email address, which then is passed back to GAS to be added to the Calendar Event in question. That way they can choose the email they want (instead of whatever Session.getActiveUser().getEmail() returns) to sign up with. (and by sign up, I mean get added to the guest list - they still have to accept the invite, but that's fine).
Is this possible? I'm not seeing any examples of this so maybe there's a better way?
I am starting to tear out what little hair I have. I've included my latest sample code, where I pass the event object into the HTML template. It's not throwing an error, but it's not working either. Thank you in advance!!
Code.gs:
function doGet(event) {
// // shorten the event parameter path;
var param = event.parameter;
// // get the calendar event id passed in the query parameter
var eventId = param.eId;
var calId = param.calId;
var cal = CalendarApp.getCalendarById(calId);
var t = HtmlService.createTemplateFromFile('Index');
t.eObj = cal.getEventById(eventId);
return t.evaluate();
}
function addEmail(emObj,myForm){
var guestEmail = myForm.user;
emObj.addGuest(guestEmail)
}
and Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function update() {
alert("Success!");
}
</script>
</head>
<body>
<form id="myForm">
<input id="userEmail" name="user" type="text" />
<input type="button" value="Submit" onClick="google.script.run.withSuccessHandler(update).addEmail(eObj,this.form)" />
</form>
</body>
</html>
You don't have scriptlets in your html file, so you don't need to evaluate a template. I've added another 2 input fields for the calId and eventId. They get replaced in the HTML before being served. Then the event ID and Cal ID are passed back in the form object.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function update() {
alert("Success!");
}
</script>
</head>
<body>
<form id="myForm">
<input id="userEmail" name="user" type="text" />
<input name="calId" type="text" style="display:none"
value="zzz_calID_zzz"/>
<input name="eventId" type="text" style="display:none"
value="zzz_eventID_zzz"/>
<input type="button" value="Submit" onClick="google.script.run
.withSuccessHandler(update)
.addEmail(this.form)" />
</form>
</body>
</html>
doGet:
function doGet(event) {
// // shorten the event parameter path;
var param = event.parameter;
// // get the calendar event id passed in the query parameter
var eventId = param.eId;
var calId = param.calId;
var t = HtmlService.createHtmlOutputFromFile('Index').getContent();
t = t.replace('zzz_calID_zzz',calId);
t = t.replace('zzz_eventID_zzz',eventID);
return HtmlService.createHtmlOutput(t);
}
Server code:
function addEmail(myForm){
var cal = CalendarApp.getCalendarById(myForm.calId);
var event = cal.getEventById(myForm.eventId);
var guestEmail = myForm.user;
event.addGuest(guestEmail)
}

HTML5 input type show only years

Maybe this question already asked but that not solve my problem.
This is my query in input box i want to show only years like this
Thanks in advance
Note: Already this qustions asked but it not solve my issue
How to Resolve input year only <input date="year">
You can use this snippet.
PHP Version:
<select class="form-control" name="startyear">
<?php
for ($year = (int)date('Y'); 1900 <= $year; $year--): ?>
<option value="<?=$year;?>"><?=$year;?></option>
<?php endfor; ?>
</select>
JavaScript Version:
<select name="yearpicker" id="yearpicker"></select>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
let startYear = 1800;
let endYear = new Date().getFullYear();
for (i = endYear; i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
</script>
Please try select and show year only. And guide is here
I would like to make a small correction to Rhalp's answer for efficiency sake. Don't initialize the object 219 times. In general it's much less work on the browser engine if you get the member before you loop over it.
<select name="yearpicker" id="yearpicker"></select>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript">
let startYear = 1800;
let endYear = new Date().getFullYear();
for (i = endYear; i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
</script>

Input to capture minutes and seconds in the format (mm:ss) in angularjs

I am creating a simple form for an application in angularjs. I need an input field to recieve time data with only minutes and seconds in the format "mm:ss". Anyone who has worked on this, your assistance would be highly appreciated. I already have created time input for my form. Actually, I am working on project created by other programmer. The model for the time input was initialized as follows:
function initDate(date, indexX, indexY){
if(date != null && date != ''){
var dateArray = date.split(":");
var dt = new Date(1970,1,1,dateArray[0],dateArray[1],dateArray[2]);
vm.modelDate[indexX][indexY] = dt;
}
}
<input name="inputExTime{{q.listSubQuestions[contTime].questionId}}{{contTime}}0"
type="time" class="form-control btn-act btn-act-inputs intime_ex" step="1"
ng-disabled="disabledfields"
ng-model="vm.modelDate[0][contTime]"
min="00:00:00" max="12:59:00"
ng-change="vm.changeDate(parentIndex,0,contTime);vm.calculateHours(form['inputExTime'+q.listSubQuestions[contTime].questionId+contTime+0].$modelValue, form['inputExTime'+q.listSubQuestions[contTime].questionId+contTime+2].$modelValue, form['inputExTime'+q.listSubQuestions[contTime].questionId+contTime+3], contTime);vm.average();"
ng-required="$index<vm.numberOfRequiredRows?(q.attributes.required==false?false:isregister):false"
ng-class="{true: 'inp-f'}[form['inputExTime'+q.listSubQuestions[contTime].questionId+contTime+0].$invalid]"
ng-init="vm.modelDate[0][contTime]=null;vm.initArray(''+q.listSubQuestions[contTime].questionId+contTime+0);vm.initDate(q.listSubQuestions[0].listAnswers[contTime].detail, 0, contTime);"
/>
You need to define an input element in your form of the time time:
<input type="time" ng-model="timeModel">
The ng-model would be a Date object. Otherwise, AngularJS will throw an error.
var app = angular.module('time', []);
app.controller('MainCtrl', function($scope) {
// The order of the params is the following:
// Year, Month, Day, Time, Minutes, Seconds
$scope.timeModel = new Date(2017, 10, 13, 10, 30, 0);
});
<!DOCTYPE html>
<html ng-app="time">
<head>
<meta charset="utf-8" />
<title>Time Model Example using AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="time" ng-model="timeModel">
</body>
</html>
On the official documentation, you can find more information about this.
Keep Rocking!

Add number variables in HTML

new to site but have been using for a while - its a great help!
I am trying to add two variables from inputs; example 2 + 2 but I keep getting answer 22 not 4.
Once I get around this I will want a form with 5-6 variables and a couple of answers.
Your help please with what I am sure is a very simple answer (I am learning programming).
Here is what I have...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="profitcalc">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2">Profit Calculator</th></tr>
<td>
Dollar Rate <input type="number" name="xrate" id="input" onchange="calculate();"/>
<br>
Marketplace Fee <input type="number" name="marketfee" id="input" onchange="calculate();"/>
</td>
<td><input type="number" name="profit" id="output"></td>
<table>
</form>
<script type="text/javascript">
function calculate() {
var vxrate = document.profitcalc.xrate.value;
var vmarketfee = document.profitcalc.marketfee.value;
var vanswer = vxrate + vmarketfee;
document.profitcalc.profit.value = vanswer;
}
</script>
</body>
</html>
The values you read from the <input> fields are strings so Javascript concatenates them, hence the 22 result.
You need to force them to numeric values before performing the arithmetic with parseFloat()
<script type="text/javascript">
function calculate() {
var vxrate = parseFloat(document.profitcalc.xrate.value);
var vmarketfee = parseFloat(document.profitcalc.marketfee.value);
var vanswer = vxrate + vmarketfee;
document.profitcalc.profit.value = vanswer;
}
</script>
[Edit]
Revised to use parseFloat() rather then parseInt() as this code looks like it'll need decimals.

Why the program not run correctly?

I am beginner to html and asp. I should write code of the program in Notepad. I want the program that when I click on the Random Button, generate a random number and when I click on the Check button, the program compare between my guess and random number. I write this code but when run the program, not show random number and not compare. Why?
<html>
<head>
<script>
var numOfGuess=new number(0);
var numRandom;
var num;
function RandomNum(){
numRandom=new number(math.floor(math.random()*100));
response.write(numRandom);
numOfGuess=0;
}
fucntion Guess(){
num=document.getElementById("guess");
var alert="";
if(num.value<numRand){
alert="grater than!";
numOfGuess++;
}
esle if (num.value>numRand){
alert="lower than!";]
numOfGuess++;
}
else{
alert="equal!";
numOfGuess++;
}
document.getElementById("message").innerHtml=alert;
}
</script>
</head>
<body>
<input type="text" id="guess">
<input type="submit" onClick='RandomNum()' value="Random">
<p id="message"></p>
<input type="submit" onClick='Guess()' value="Check">
</body>
</html>
Like AnthonyLeGovic said:
you need to be rigorous when programming
here is what you are looking for:
<html>
<head>
<title>test</title>
<script language="javascript">
var numRand = 0;
var numGuess = 0;
var numTry = 1;
function setRand(){
numRand = Math.floor((Math.random()*100)+1);
numTry = 0;
alert("done");
}
function guess(){
var msg = document.getElementById("message");
numGuess=Number(document.getElementById("guess").value);
if(numGuess>numRand){
msg.innerHTML = "lower than!";
}
else if(numGuess<numRand){
msg.innerHTML = "grater than!";
}
else {
msg.innerHTML = "equal! tried " + numTry +"times";
}
numTry++;
}
</script>
</head>
<body>
<input type="text" id="guess" />
<input type="button" onclick="setRand()" value="Random" />
<p id="message"></p>
<input type="button" onclick="guess()" value="Check" />
</body>
do not forget language="javascript" in your script tag else your script will not work!
You need to be rigorous when programming.
There are some syntax errors in your code like :
fucntion instead of function while declaring Guess function.
you declare numRandom as a global variable but you are using numRand then, unfortunately these two variables are not the same at all. Moreover numRand isn't declare (which is logic because it should be numRandom).
you are using innerHtml instead of innerHTML (case sensitive) in order to help the user to find the right number.
Maybe there are some more mistakes I've forgotten right there.