Check date on page load - javascript

I would like to get the following script to run when the window first loads.
var now = newDate();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
month = month +1;
var today = days + "." + month + "." + years;
var checkdate = 11.05.2020;
if (today >= checkdate)
{
alert("Today is the day");
document.location.href="today.html";
}
else
{
alert("Today is " + today);
}
Please help.

Try this.
function myFunction() {
var now = new Date();
var years = now.getFullYear();
var month = now.getMonth();
var days = now.getDate();
var today = days + "." + month + "." + years;
var checkdate = "11.05.2020";
if (today >= checkdate) {
alert("Today is the day");
document.location.href = "today.html";
} else {
alert("Today is " + today);
}
}
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>

run the code after the page has been loaded
$(function() {
// ...Code goes here
});
or
$(document).ready(function() {
// ...Code goes here
});

Related

Read a remote text file

I'm trying to write a web page which tells user to input a date of booking, this input field has jQuery calender. I've also successfully disable specific dates so no 2 users book a same date.
My question is how can I read a file from server, get Dates, process and disable them in jQuery calender? Or is there a way to send data from PHP to JavaScript? JSFiddle. Here is my code:
var eventDates = ["28/1/2018", "27/1/2018", "2/2/2018"];
$(function() {
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
Date: <input id="iDate">
</body>
</html>
Make an ajax request like below, that php service will return disabled dates.
$.get('your_file.php').done(function(eventDates){
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
});
or directly print out your array into html output like below:
<?php
$disabledDates = array("2012-01-01", "2012-02-02");
?>
<script type="text/javascript">
var eventDates = <?php echo json_encode($disabledDates); ?>
$("#iDate").datepicker({
beforeShowDay : function(date) {
var disDate = date.getDate();
var disMonth = date.getMonth();
var disYear = date.getFullYear();
var formattedDate = disDate + "/" + (disMonth + 1) + "/" + disYear;
if ($.inArray(formattedDate, eventDates) != -1) {
return[false]
} else {
return[true]
}
}
});
</script>

Javascript check if the date is valid then change it if not valid

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
I've created a script where it highlights the next 14 days then it checks if the date is valid or not. If Not it will change the date.
Problem is:
When i select the date October 31, 2017
the array should look like this
10/31/2017, 11/1/2017, 11/2/2017,...
But the array returns:
10/31/2017, 11/1/2017, 11/1/2017, 11/2/2017, ...
thanks in advance
Here is the solution using moment.js , it is very easy , you don't need to use that complicated coding which you have. It is add a 14 days in selected date.Moment.js is automatically handle the month change , year change etc , so you don't need that extra conditions which is for change month,year,date etc.
var dates = new Array();
function addDa(date){
dates = [];
var selected_date = moment(date);
var last_date = moment(date).add(14, 'days');
for (var dat=selected_date; dat <= last_date; dat.add(1, 'days'))
{
dates.push(dat.format('MM/DD/YYYY'));
}
console.log(dates);
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDa(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
error in :
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
you pushed value : 11/1/2017 to datas.
then day=1, month=11 :
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
}
you push again value : 11/1/2017 . you can add day++ to
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
same as below :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
day++;
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
Btw found a solution adding a day++ after pushing it when the date is not valid :)

document.lastModified only displays current date?

I've been looking for a way to display the date the page last was updated.
Now I've been searching around, and everything points to the document.lastModified function, but however I've tried to fix it, it always shows the current date.
I've tried this example:
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds(); }
else {
Seconds = modiDate.getSeconds(); }
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime }
document.write("Last updated on ");
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]"); document.write("");
Or a simple one like this:
<SCRIPT LANGUAGE="JavaScript">
var t = new Date(document.lastModified);
document.write("<I>Last Updated: "+document.lastModified+"</I><BR>");
document.write("<I>Last Updated: "+t+"</I><BR>");
</SCRIPT>
Is there any other way to do this?
.. Without taking a 3 years tech-class?
Press here to see the scripts live
Because you are modifying it currently. Check this out for example.
To make this work based on your requirement, checkout this link and this link
check this it will help u
Put this on the page at the bottom:
<script type="text/javascript" src="js_lus.js"></script>
Name the file whatever you want. Example: js_lus.js Make sure src=""
path is correct for all your pages.
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" +
modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds();
} else {
Seconds = modiDate.getSeconds();
}
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime
}
document.write("Last updated on ")
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]")
document.write("");

displaying current date in a text box - javascript

I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks
You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()
Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })
This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >
<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful
<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>
html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo
<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm
If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>

get javascript to write to variable rather than document.write

I have the following javascript that prints the timestamp:
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(hours + "" + minutes + seconds + month + "" + day + "" + year)
//-->
</script>
However I want to use this timestamp in many places in the page, how can i call it like $timestamp so i can control where its placed?
Thanks in advance.
Set a variable, like:
var timestamp = hours + "" + minutes + seconds + month + "" + day + "" + year;
and later in code use that variable to show info in your page, like:
var container = document.getElementById('container1');
container.innerHTML = timestamp;
where 'container1' is a html element like span, div, p, etc. ex:
<span id="container1"></span>
answer
<script>
function startTime()
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<span id="txt"></span>
<script type="text/javascript">
startTime().swap('txt');
</script>

Categories