I'm trying to figure out how to display AM when my website loads (mm-dd-yyyy --:-- AM) in a date time local input. But i'm having a hard time understanding the value attribute of datetime-local.
You can also consider using something like date.js:
<html>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script>
(function ()
{
document.write(new Date().toString("hh:mm tt"));
})();
</script>
</html>
Please check
var date = new Date();
date = date.toLocaleTimeString('en-US');
Note: It will show the time (AM/PM)
Related
<!DOCTYPE html>
<html>
<head>
<title>Date Time Issue</title> </head> <body>
<script>
var dateInOtherFormat = "2017-02-02T13:00:00";
var localDate = new Date(dateInOtherFormat);
document.body.innerHTML = localDate;
</script>
</body>
</html>
Converting from "yyyy-MM-ddThh:mm:ss" format to local time showing different results in different browsers.
You can write a method for checking what the browser is. Then to the different browser use different code.
I'm hoping to pull a variable from a text box that would be submitted like "201442" turn it into time 20:14:42 then subtract 5 seconds for the output 20:14:37. So far i have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>-5</title>
<script>
var incomingtime = "0";
</script>
<script>
function calctime(){
incomingtime = document.getElementById("inputtime").value;
alert (incomingtime);
}
</script>
</head>
<body>
<input type="text" id="inputtime"/><input type="text" id="outputtime"/><br>
<button onclick="calctime()">-5 Dat</button>
</body>
</html>
What would be the best approach? Splitting up the input into three sections and doing the math that way? Or is there a simpler solution? How would i go about throwing first two chars into a variable, third and fourth into a var, then 5th and 6th into a var for calculations?
I guess, you should parse your string and put your time into Date() object, then it will be easier to do any computations on your time value
You can parse it in the following way:
timeObj = new Date(0,0,0,
incomingtime.substring(0, 2),
incomingtime.substring(2, 4),
incomingtime.substring(4, 6));
Then you can carry out your values, using object's 'get' functions.
If you want to change its value, you can just add or substract time (in miliseconds). For example, if you want to substract 5 seconds, you should just:
timeObj -= 5*1000;
I used Datepicker plugin for getting Calendar in HTML. But my boss ordered me not to t use any jquery plugins for date picker. He is saying that I must use native code only for date picker. It should work without Javascript also.
Is it possible to create native calendar in html ?
I know html5 supports native date picker; but that is not supported by all browsers.
Can i get native date picker as following style..?
"Native" and "without JavaScript" is where this idea will not work on older browsers. You could always create an HTML5 datepicker, and non-supportive browsers will fallback to a plain textbox. You could instruct the user to enter a date in MM/DD/YYYY format, and have this format applied by the datepicker, or by hand if the datepicker is unavailable.
This page offers some advice on the HTML5 datepicker: http://html5tutorial.info/html5-date.php
Edit: Alternatively, you could just create three dropdown menus and have the user select the month, day, and year. (Of course without JS in this case, you couldn't have the number of days in a month change with the user's choice, but you could always validate their input on the server.)
You could instruct the user to enter a date in MM/DD/YYYY format, spryno724
This, a simple html5 placeholder (you can also style css placeholder) would suffice.
<input type='text' placeholder='dd/mm/yyyy' name='form[datetime]' id='datetime' />
why not make the jquery datepicker a fallback?
pseudocode:
if (! input.supports('date'))
$(input).datepicker();
this way, you get a datepicker if your browser does not support the native one. That is exactly what jQuery's original 'unobtrusive' idea was.
Look at this simple Code.
You need to add 2 js files and 1 css file from net.. Don't worry,It is simple
Here it is
<!DOCTYPE html>
<html>
<head>
<title>Date</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
<body>
<input type="text" id="dob" name="date" placeholder="MM/DD/YYYY"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
I have a field that has a datepicker, but what I want that field, called New Date, to have populate with the date in the div id="olddate" plus one day. The problem I'm seeing is that the date in the olddate div is a text string, so I need to convert that into a date object, put it in the New Date field and add a day. I also prefer to keep it in jQuery, if possible. I've seen plenty of answers to questions very similar to this, but nothing seems to work. Thanks in advance!! Fiddle: http://jsfiddle.net/Carlos1815/U9Avn/
Here's what I got thus far:
<html lang="en">
<head>
<link href="css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script>
$(function() {
var olddate = $("#olddate").text();
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "setDate", olddate);
});
</script>
</head>
<body>
<div id="olddate">3/30/2013</div>
<div>New Date: <input type="text" id="datepicker"></div>
</body>
</html>
Its worth to use moment.js at this moment to solve this date time problems.
Working Demo
$(function () {
var day = moment($("#olddate").text(), "MM/DD/YYYY");
day.add('days', 1)
var newDate=day.toDate();
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", newDate);
});
I have a question.
Firstly, I am not going to pretend that I know what I am talking about here. I am a newbie to http and JavaScript.
I think my question may be answered in this post
IMG SRC tags and JavaScript
but I thought I would explain the exact thing I am trying to achieve in case there is an easier way.
I have a webpage, I want to display an image on it. Only thing is, the image is coming from an automated system monitor, the image is automatically generated each day and placed in a new directory depending on date.
e.g. On April 4 = "http://host/partition/2009/apr/04/cpu.gif"
e.g. On April 5 = "http://host/partition/2009/apr/05/cpu.gif"
To facilitate this, I have created some basic JavaScript to give me the date in the format I need it. I have all that working. Now I just want to use that variable I created to show the image.
I have the JavaScript code stored in a function called displaydate()
If I do this <script language="JavaScript"> displaydate() </script> I see
"http://host/partition/2009/apr/05/cpu.gif" and that is correct.
Now how do I display this on the site correctly?
<img src="displaydate()" </td> //This does not work. I am just adding it to show where I have been heading.
P.S. I have read a lot of pages on this and been trying a lot of things, but have had no luck so far. Any help, would be much appreciated.
Yes, that page probably does answer your question. Basically, you want this javascript:
<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>
Except you want to replace the "yourpicture.png" with the function you wrote to generate the correct path to the image on disk, so...
<script type="text/javascript">
document.getElementById('image').src = displaydate();
</script>
Of course, you might need to modify this a bit for your own uses, the getElementById will take as an argument whatever the id attribute of your < img > tag is. You probably want to execute the above javascript after your page has loaded, i.e.:
<html>
<head>
<script type="text/javascript">
function load()
{
document.getElementById('image').src = displaydate();
}
function displaydate()
{
//your displaydate() function here
}
</script>
</head>
<body onload="load()">
<img src="nothing.jpg" id="image" name="image"/>
</body>
</html>
You should just need to change this line
document.write("http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif");
to
return "http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif";