I am hoping you can help.
I am trying to use a date format field in HTMl, which will then use this date in JavaScript. Once it has read the date, it will work out whether it is within 3 months or not.
At the moment, it is returning saying invalid date entered. How do I get JavaScript to read the date when using a HTML date format?
<!DOCTYPE html>
<html>
<head>
<title>ICT5</title>
<script>
function checkdate() {
var UserDate = document.getElementById("date").value;
var parts = UserDate.split("/");
var dt = new Date(parseInt(parts[2], 10),
parseInt(parts[1], 10),
parseInt(parts[0], 10));
window.alert("userdate is" +dt);
var timestamp = new Date().getTime() + (90 * 24 * 60 * 60 * 1000);
window.alert("" +timestamp);
if (timestamp > dt){
alert("Selected time is less than 3 months from now");
} else {
alert("Selected time is more than 3 months from now");
}
}
</script>
</head>
<body>
<h1>ICT 5 a</h1>
<h1> Working out the difference between today and your selected date </h1>
<p> Please enter a date </p>
<input id="date" type="date">
<button type="button" onclick="checkdate()">Submit</button>
</body>
</html>
Related
I need to add a date and time clock to a website. It should display the date and time in a very specific format, taking up two lines and using an intended timezone of GMT-4; for example:
Sat, Mar 23 2019
10:33:56 PM
This happens to be for a school project, but I have limited knowledge of Javascript. I've tried looking up some examples and have found some interesting stuff, but I'm unable to adapt those examples to generate the output in the desired format.
Please Try This
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var CDate = new Date()
var NewDate=CDate.toDateString();
NewDate = NewDate + " - " + CDate.toLocaleTimeString();
document.getElementById('ct').innerHTML = NewDate;
display_c();
}
<html>
<head> </head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
For Change Date Or Time Format Please Refer this link
Get currentDate by toDateString() method and get current time by toLocaleTimeString and append both in your DOM . And call this every 1000 ms to get updated value .
function callDateTime(){
var currentDate=(new Date()).toDateString();
var currentTime=(new Date()).toLocaleTimeString();
document.getElementById('watch').innerHTML=`${currentDate}-${currentTime}`;
}
setInterval(function(){ callDateTime() }, 1000);
<p id="watch"></p>
You can add an HTML to your the body of your document:
Also, you can add a JavaScript similar to this before </body>:
Code:
function clock(){
window.rt=1000;r=0;
document.getElementById('t-0').textContent=new Date().toLocaleDateString(); // today
var m=setInterval(function(){
if(r>84600){clearInterval(m);}
r++;
document.getElementById('t-2').textContent=new Date().toLocaleTimeString(); // clock
}, window.rt);
}
<!DOCTYPE html>
<html lang="en">
<title>Clock</title>
<body onload="clock();">
<div style="text-align:center;">
📅
<b id="t-0">00/00/0000</b>
⏰
<b id="t-2">00:00:00</b>
</div>
</body>
</html>
i want compare the date and time and want show the differnce time in angularjs,i am gettig date in the format of yyyy/MM/dd,
Apart from the fact that your question normally does not deserve an answer due to the lack of own code this has been answered multiple times on SO. Next time, you should add some more information about your problem and the code you are struggling with.
Anyway, I have a simple solution for you (powered by #Tni):
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.date1 = '2015/01/01';
$scope.date2 = '2015/12/31';
$scope.getDateDiff = function() {
var date1 = new Date($scope.date1),
date2 = new Date($scope.date2),
timeDiff = Math.abs(date2.getTime() - date1.getTime());
$scope.dateDiff = 'Amount of days difference: ' + Math.ceil(timeDiff / (1000 * 3600 * 24));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
Date 1: <input type="text" ng-model="date1">
<br /><br />
Date 2: <input type="text" ng-model="date2">
<br /><br />
<button ng-click="getDateDiff()">Get Date Diff!</button>
<br /><br />
{{dateDiff}}
</div>
Please check this link, you will get better solution
JSFiddle Demo
html:
<div ng-app ng-controller="Ctrl">
{{date | date:'dd-MM-yyyy hh:mm '}} <br>
</div>
js:
function Ctrl($scope)
{
$scope.date = new Date();
}
I am trying to convert this military time clock to standard time. I am NEW (just learning) how to code computers and have no idea what to do. Websites, resources, ideas would be much appreciated.
Thank you!
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Digital Clock</title>
<script type="text/javascript">
<!--
// this function actually updates the clock display. It will be called
// every second provided by the setInterval() call in the document body
function updateClock()
{
var time = new Date(); // create a new time stamp
var hours = time.getHours(); // retrieve hours from the time stamp
hours = format(hours); // ... and format them
var minutes = time.getMinutes(); // retrieve minutes from the time stamp
minutes = format(minutes); // ... and format them
var seconds = time.getSeconds(); // retrieve seconds from the time stamp
seconds = format(seconds); // ... and format them
// update the text field (the top clock)
document.clock.display.value = hours + ":" + minutes + ":"
+ seconds;
// update the button text (the bottom clock)
document.clock.display2.value = hours + ":" + minutes;
}
// this function adds a leading zero to the number if it is below 10
function format(number)
{
if (number < 10)
{
number = "0" + number;
}
return number;
}
// -->
</script>
</head>
<body bgcolor="lightyellow">
<h2>Digital Clock</h2>
<form name="clock" action="#">
<p><input type="text" size="8" name="display" value="12:00:00" /></p>
<p><input type="button" name="display2" value="12:00:00" /></p>
</form>
<script type="text/javascript">
setInterval("updateClock()", 1000); // update the clocks every second
</script>
<p>More information on the digital clock design can be found
here.</p>
<p>You can examine the code of the project by clicking on <b>"View" ->
"Source"</b> buttons in Internet Explorer.</p>
</body>
</html>
After the line:
hours = format(hours);
You should be able to use something such as:
if (hours > 12) {
hours = hours - 12;
}
I am new to JavaScript and I am trying to make a date-picker widget, I have the selected date in mm/dd/yy format,how can I get the date as "Thu(Day),25th July(Date,month) ,2013" kind of format and also how to set the input value to the current date.Here's my fiddle,
http://jsbin.com/idowik/3/
http://jsbin.com/idowik/3/edit
There are so much warnings , please bear with me and please open the output in new tab. Thank You,
Read the docs about the Date Object: http://www.w3schools.com/jsref/jsref_obj_date.asp.
Everything you need is described there.
Have a look at the following code:
<!DOCTYPE html>
<html>
<body>
<input id="dateInput" type="text"></input>
<button id="convertButton">Convert to string</button>
<a id="dateString"></a>
<script type="text/javascript">
var dateInput = document.getElementById("dateInput");
var button = document.getElementById("convertButton");
var dateString = document.getElementById("dateString");
var date;
button.onclick = function() {
var year = 2000+ parseInt(dateInput.value.split("/")[2]);
var month = dateInput.value.split("/")[0];
var day = dateInput.value.split("/")[1];
date = new Date(year, month, day);
dateString.innerHTML = date.toDateString();
}
</script>
</body>
</html>
This html page does exactly what you want.
I am using jQuery datepicker and tried to find out difference between todays date and selected date , but getting issues... rather than issues... I was not able to find it perfectly...
I tried to do this on 'onSelect event of datepicker '
Question:
How to check whether selected Date using jQuery Datepicjer is greater than 30 days from todays date ?
Any help will be appreciated....!!
note: dont want to use any libraries, I need to solve this by using only jQuery.
Get the timestamp for 30 days from now:
var timestamp = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)
// day hour min sec msec
Compare that timestamp with the timestamp for the selected date.
if (timestamp > selectedTimestamp) {
// The selected time is less than 30 days from now
}
else if (timestamp < selectedTimestamp) {
// The selected time is more than 30 days from now
}
else {
// -Exact- same timestamps.
}
I have created one sample for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="thedate"/>
<div id="checkDate">Check Date</div>
</body>
</html>
and Js
$('#thedate').datepicker();
$('#checkDate').bind('click', function() {
var selectedDate = $('#thedate').datepicker('getDate');
var today = new Date();
var targetDate= new Date();
targetDate.setDate(today.getDate()+ 30);
targetDate.setHours(0);
targetDate.setMinutes(0);
targetDate.setSeconds(0);
if (Date.parse(targetDate ) >Date.parse(selectedDate)) {
alert('Within Date limits');
} else {
alert('not Within Date limits');
}
});
You can check this code online Here
Try this:
$('input').datepicker({
onSelect: function()
{
var date = $(this).datepicker('getDate');
var today = new Date();
if((new Date(today.getFullYear(), today.getMonth(), today.getDate()+30))>date)
{
//Do somthing here..
}
},
});
demo: http://jsfiddle.net/jeY7S/