I am currently using the HTML 5 Datetime-local input to get my date and time data which then gets replicated into another input field however when it gets replicated it formats the date and time differently. How am I able to format the date/time before it gets added into the input field?
Datetime-local picker:
Input field:
HTML:
<input id="dt" class="input" type="datetime-local">
jQuery:
$(document).ready(function () {
$('#dt').on('change', function () {
$('#datetime').val($(this).val())
})
})
TIA
You can easily edit the value of your date time local using JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<label for="datetime">datetime</label>
<input type="text" name="datetime" id="datetime" value="" />
<input id="dt" class="input" type="datetime-local" onchange="dateTimeFormat()">
<script type="text/javascript" charset="utf-8">
function dateTimeFormat(){
let unformattedDT = dt.value;
let processingDate = unformattedDT.replace(/-/g,"/");
console.log(processingDate);
let list=processingDate.split("T");
datetime.value =`${list[0]} , ${list[1]}`;
}
</script>
</body>
</html>
I have two DATE fields in a standard HTML form (startdate) and (enddate)
<form method="POST" action="processform.php" target="_top">
<span>▶</span><select class="selectdate" name="startdate" required>
<option value='2019-12-31'>Tue, 31-Dec-19</option><option value='2019-12-30'>Mon, 30-Dec-19</option><option value='2019-12-27'>Fri, 27-Dec-19</option><option value='2019-12-26'>Thu, 26-Dec-19</option><option value='2019-12-24'>Tue, 24-Dec-19</option><option value='2019-12-23'>Mon, 23-Dec-19</option><option value='2019-12-20'>Fri, 20-Dec-19</option><option value='2019-12-19'>Thu, 19-Dec-19</option><option value='2019-12-18'>Wed, 18-Dec-19</option><option value='2019-12-17'>Tue, 17-Dec-19</option><option value='2019-12-16'>Mon, 16-Dec-19</option><option value='2019-12-13'>Fri, 13-Dec-19</option><option value='2019-12-12'>Thu, 12-Dec-19</option><option value='2019-12-11'>Wed, 11-Dec-19</option><option value='2019-12-10'>Tue, 10-Dec-19</option><option value='2019-12-09'>Mon, 09-Dec-19</option><option value='2019-12-06'>Fri, 06-Dec-19</option><option value='2019-12-05'>Thu, 05-Dec-19</option><option value='2019-12-04'>Wed, 04-Dec-19</option><option value='2019-12-03'>Tue, 03-Dec-19</option><option value='2019-12-02'>Mon, 02-Dec-19</option><option value='2019-11-29'>Fri, 29-Nov-19</option> </select>
<span>▶</span><select name="enddate" required>
<option value='2020-01-03'>Fri, 03Jan20</option><option value='2020-01-10'>Fri, 10Jan20</option><option value='2020-01-17'>Fri, 17Jan20</option><option value='2020-01-24'>Fri, 24Jan20</option><option value='2020-01-31'>Fri, 31Jan20</option><option value='2020-02-07'>Fri, 07Feb20</option><option value='2020-03-13'>Fri, 13Mar20</option><option value='2020-03-20'>Fri, 20Mar20</option><option value='2020-03-27'>Fri, 27Mar20</option><option value='2020-04-03'>Fri, 03Apr20</option><option value='2020-04-09'>Thu, 09Apr20</option><option value='2020-06-12'>Fri, 12Jun20</option><option value='2020-06-19'>Fri, 19Jun20</option><option value='2020-06-26'>Fri, 26Jun20</option><option value='2020-07-02'>Thu, 02Jul20</option><option value='2020-07-09'>Thu, 09Jul20</option><option value='2020-12-11'>Fri, 11Dec20</option><option value='2020-12-18'>Fri, 18Dec20</option><option value='2020-12-24'>Thu, 24Dec20</option><option value='2020-12-30'>Wed, 30Dec20</option><option value='2021-01-07'>Thu, 07Jan21</option> </select>
<input type="submit" value="Submit">
</form>
All I wish is to check if the user selected startdate must be less than the selected enddate at the BROWSER level (not at the server).
If selected startdate is greater than or equal to the selected enddate, it should show an error without actually submitting the form. The form should be submitted only if the startdate is less than the enddate.
While I was able to get it working on the server side using PHP, I am unable to make it work at the browser level (possibly javascript which I am not very conversant with).
Any inputs on how this can be achieved?
This is the code I am trying but it is showing "valid date range" for all cases:
const first = document.getElementsByName('startdate')[0];
first.addEventListener('change', function() {
console.log(first.value);
});
const second = document.getElementsByName('enddate')[0];
second.addEventListener('change', function() {
console.log(second.value);
});
if (first.valueOf() > second.valueOf()) {
alert("date is not in valid range");
}else{
alert("date is in valid range");
return true;
}
Thanks
You'll have to use JavaScript for any client-side validations. You can make the PHP call from the JavaScript side.
You can validate date in JavaScript like:
(from here)
function validation(form) {
var v2 = document.getElementById('v2'),
date = new Date(v2.value),
d1 = date.getTime(),
d2 = new Date('12/12/2012').getTime(),
d3 = new Date('1/1/2013').getTime();
if (d1 > d2 || d1 < d3) {
return true;
}else{
alert("date is not in valid range")
}
}
It might seem like a complicated task, but you can actually divide it into more manageable chunks:
Listen to changes in the form fields' values.
Validate the new values, then either allow them or do something else (i.e. show an error message).
For (1) I'd suggest you use JS. For example:
const first = document.getElementsByName('startdate')[0];
first.addEventListener('change', function() {
console.log(first.value);
});
const second = document.getElementsByName('enddate')[0];
second.addEventListener('change', function() {
console.log(second.value);
});
<form method="POST" action="processform.php" target="_top">
<span>▶</span>
<select class="selectdate" name="startdate" required>
<option value='2019-12-31'>Tue, 31-Dec-19</option>
<option value='2019-12-30'>Mon, 30-Dec-19</option>
</select>
<span>▶</span>
<select name="enddate" required>
<option value='2020-01-03'>Fri, 03Jan20</option>
<option value='2020-01-10'>Fri, 10Jan20</option>
</select>
<input type="submit" value="Submit">
</form>
And then you can take it further and use the listeners' functions to actually compare the two dates.
As a side note, I also encourage you to use JS in order to produce those (too) similar <option> tags. Something like this:
const startDateElement = document.getElementsByName('startdate')[0];
const startDates = ['2019-12-31', '2019-12-30', '2019-12-27']; // etc.
startDates.forEach((date) => {
const newOption = document.createElement('option');
newOption.setAttribute('value', date);
newOption.innerHTML = date;
startDateElement.appendChild(newOption);
});
// And the same for end date
<form method="POST" action="processform.php" target="_top">
<span>▶</span>
<select class="selectdate" name="startdate" required>
</select>
</form>
Then your code will be much more generic, hence easier to read, maintain and update in the future.
The functionality helps to track the user selection from start date and time to the end date and time on the client side. PHP will evaluate on the server side (Not preferable)
The user may not be able to select the end date previous of the start date.
Here is the link given below with example
DEMO - https://jsfiddle.net/ssuryar/vr1zd8ep/
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
</html>
Here is jsfiddle
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<p>First name: <input data-bind="value: firstName" maxlength="3" /></p>
<style>
input:invalid
{
border-color: #e67b7b;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var viewModel =
{ firstName: ko.observable("Ikram")
};
ko.applyBindings(viewModel);
});
</script>
In Chrome when there is old value that exceeds maxlength, constraint validation does not validate until we edit input. When we start to edit it gets red.
In IE it works as expected, it gets red(validates) at the start when we load the page with old value.
This doesn't look like a knockout issue.
<input value='my longname' maxlength="3" />
Also does not show an error in chome.
Here is a knockout workaround.
First create a hasError computed obseable.
function hasErrorComputed(){
return viewModel.firstName().length > 3;
}
iewModel.hasError = ko.computed(hasErrorComputed);
Then bind css to hasError.
<input data-bind="css: {error: hasError}, value: firstName" maxlength="3" />
Here is the jsfiddle
A more eloquent solution can be achieved with custom-bindings: http://knockoutjs.com/documentation/custom-bindings.html
Or extenders http://knockoutjs.com/documentation/extenders.html
Please reach out for more details.
I am trying to make a spreadsheet sidebar that allows a user to input data to create records, as well as edit them. So far I understand how to create the sidebar and display it. I've got a working form that can submit values.
What I am struggling with is how to pre-populate the forms. Form instance some records are associated with others, and I'd like to have a hidden field to store and eventually submit the associated id. Eventually users should also be able to edit records and I'd like to use the same form and just populate the fields and reuse the same submission flow.
I've tried a few different things found on here and other places, but nothing seems to work.
Here is the HTML for the sidebar template
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
$('#accountId').val(<? data.accountId ?>);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(alertSuccess).createContact(formObject);
}
function alertSuccess(message) {
var div = document.getElementById('alert');
div.innerHTML = "<p>" + message + "</p>";
google.script.host.close();
}
</script>
</head>
<body>
<p>Enter Contact Info</p>
<form id="contact" onsubmit="handleFormSubmit(this)">
Account Id: <br>
<input type="number" name="accountId" value="0" id="accountId" /><br>
Name:<br>
<input type="text" name="name"/><br>
Phone Number:<br>
<input type="text" name="phone"/><br>
Email:<br>
<input type="email" name="email"/><br>
Contact Type:<br>
<input type="radio" name="type" value="emergency" checked> Emergency<br>
<input type="radio" name="type" value="guardian" checked> Guardian<br>
<input type="radio" name="type" value="other" checked> Other<br>
<input type="submit" value="Submit" />
</form>
<div id="alert"></div>
</body>
</html>
And the accompanying .gs file:
var AlternativeContact = ObjectModel("AlternativeContacts");
function newContact() {
var htmlOutput = HtmlService.createTemplateFromFile("new_contact");
var id = ACCOUNT_MANAGER.getRange("M4").getValue();
htmlOutput.data = {accountId: id};
UI.showSidebar(htmlOutput.evaluate());
}
function createContact(contactJSON) {
var newContact = new AlternativeContact(contactJSON);
newContact.save();
return "Success!";
}
The first line that uses ObjectModel is creating and ORM around the data sheet.
Thanks for the help!
Couple changes and it seems to be working in a basic way.
First, in the scriptlet, i needed to us the printing tag. so use in stead of . This was causing the value to not be used in the rendered template.
Second, I changed my jQuery to:
$(document).ready(function () {
$("input#accountId").val(<?= data.accountId ?>);
});
If anyone is able to answer, I'd be curious why using the $(document).ready is needed. Doesn't everything in the get run? is it an order of operation thing?
How can create html template of following?
I have 6 textboxes. Textboxes 1-5 is for input and 6 is for output. In textbox 6, i want average value of other 5 textboxes without pressing any button in order to send result to textbox 6. Input of 5 textboxes may be optional(textbox value may be blank or number).
I guess this is what you are looking for...
index.html
<!DOCTYPE html>
<html>
<head>
<title>Average Calculation</title>
</head>
<body>
<input class="my_val" type="number" size="5" name="input1">
<input class="my_val" type="number" size="5" name="input2">
<input class="my_val" type="number" size="5" name="input3">
<input class="my_val" type="number" size="5" name="input4">
<input class="my_val" type="number" size="5" name="input5">
<input class="output" type="number" size="5" name="input6" readonly>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
$('.my_val').keyup(function () {
var total = 0,
count_field = 0,
average;
$('.my_val').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
count_field += 1;
total += val;
}
});
average = total / count_field;
$('.output').val(average);
});
Here is the working fiddle JSFiddle
Hope I helped you.