Datejs - Problem with 12:00 pm - javascript

I really have no idea what I'm doing wrong here. I can't get Datejs to properly parse "12:00 pm" however, it seems to work fine on other dates. Below is a clip from the Firefox debugger:

Download the latest version of Datejs from SVN not the version in the "download" section.

Try wrapping the code in an IIFE.
<!DOCTYPE html>
<html>
<body>
<input type=text id=d onkeyup="parsedate()">
</input>
<br>
<span id=output></span>
<script type="text/javascript" src="../../../static/js/date.js"></script>
<script>
( function() {
parsedate = function() {
var input = document.getElementById('d').value;
var output = document.getElementById('output');
var d = Date.parse(input);
if (d !== null) {
output.innerHTML = d.toString();
} else {
output.innerHTML = "------"
}
}
}());
</script>
</body>
</html>
The IIFE being
(function(){
//code
}());
What I'm curious about is why FireFox behaves this way. I know they added security updates a few years back that prevent you from overwriting Date.prototype functions, but why is an IIFE capable of accessing this scope?

Related

Adding a manufacturing lead time to website Javascript to HTML

I'm using a CMS system that works alongside a backend that we must use. I'm trying to have it display a production lead time date such as www.customink.com. Current day +10 business days I'm using a HTML widget in this custom CMS, so I'm not sure if that is relevant. I'm struggling getting it to show up, and I really have no idea what I'm doing. I tried my best lol. Here's what I have thus far.
EDIT: Also, If I want it to only display M-F how do I go about that? I want it to read - Guaranteed by Fri, Oct 11.
<html>
<body>
<script>
document.getElementById("p1").innerHTML = newDate;
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
var newDate = addDays(new Date(), 10);;
</script>
</body>
</html>
document.getElementById("p1").innerHTML = newDate;
In this statement, what you are doing is trying to find the DOM element with id p1 and then setting the value of newDate variable as its value. Therefore you should define an element with such id before your script block.
Then you are declaring and setting the value of the newDate after you have set the value for the above element. But you should do it before that.
See the fixed code below.
(I have used a <div> element as the p1 element. But you can use any other options such as <span>, <h1>, <h2>, etc. based on your requirement.)
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
</head>
<body>
<div id='p1'></div>
<script>
var newDate = addDays(new Date(), 10);
document.getElementById("p1").innerHTML = formatDate(newDate);
function addDays(theDate, days) {
//return new Date(theDate.getTime() + days*24*60*60*1000);
return moment(theDate).add(days, 'd').toDate();
}
function formatDate(date) {
return moment(date).format('[Guaranteed by] ddd, MMM DD');
}
</script>
</body>
</html>

How can I add a date and time clock to a website?

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>

Need a counter to update daily

I am looking for a quick script that will update a number daily. This is for something like the number of days without an accident in the work place.
I want it to to put an link to the HTML page for it in the startup group in XP (yes XP, company is a little behind) and have it run at bootup. I may add more stuff later but this is the main purpose.
So each day it needs to update the number by 1 based on the previous days number, so it is most likely going to have to be read and written to a file. If the browser is closed or the system rebooted it should not update increment the browser unless it is a different day.
Can someone point me to a good way of doing this. I was thinking javascript, but I am open. I have no access to a database.
Thanks
This script should do the trick
HTML
<div id="counter">1</div>
<button id="reset">Reset</button>
JS
setInterval(function(){
var value = parseInt(document.getElementById('counter').innerHTML);
document.getElementById('counter').innerHTML = (value+1).toString();
},86400000); //86400000 = 1 day in milliseconds
var btn = document.getElementById('reset');
btn.onclick=function(){
document.getElementById('counter').innerHTML = "0";
};
http://jsfiddle.net/khe67/3/
Well than you may wanna use HTML5 to save variables within the web browser, so if you happen to reload or reboot the computer you still have your variables saved. Code may look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello HTML5</title>
<script>
window.onload = function (){
if(typeof(Storage)!=="undefined"){
var goodDays;
var oldTime = localStorage.getItem("oldTime");
var timestamp = new Date().getTime();
if(!oldTime || oldTime==""){
goodDays = 1;
localStorage.setItem("oldTime", timestamp);
localStorage.setItem("dayCounter", goodDays);
}else{
var timeCheck = oldTime + (24 * 60 * 60 * 1000);
goodDays = localStorage.getItem("dayCounter");
if(timestamp > timeCheck){
goodDays++;
localStorage.setItem("oldTime", timestamp);
localStorage.setItem("dayCounter", goodDays);
}
}
document.getElementById("dCounter").innerHTML=goodDays;
}else{
alert("geat a real browser");
}
}
function resetDays(){
localStorage.setItem("oldTime", "");
localStorage.setItem("dayCounter", "");
location.reload();
}
</script>
</head>
<body>
<div style="display:inline">DAYS WITH OUT INCENDENTS </div><div style="display:inline" id="dCounter"></div>
<div style="cursor:pointer" onclick="resetDays()">Reset</div>
</body>
</html>

Showing Date in different format in javascript datepicker

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.

How to implement the DATE PICKER in PhoneGap/Android?

I have tried to implement the date picker in android. I want it to get the data and show it in the text format
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
<script type="text/javascript" charset="utf-8">
function dateTest() {
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
currentField.val(newDate.toString("dd/MMM/yyyy"));
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
}
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
<input type="button" onClick ="dateTest()" value ="Today's Date!!" />
<div id="view"></div>
</body>
</html>
I am getting it as an alert...but unable to store it as a string on the same page
Why loose ur head?
A <input type="date"> will allways deppend on device's interpretation of it, in some android devices it doesn't even work,
There is plenty of plugins, addons, whatever, for it,
I personally like, and use mobiscroll: Link
Edit: Mobiscroll is now paid but there are loads of free frontend mobile frameworks and probably all of them have a datepicker, such as jQuery Mobile-datepicker.
It seems that your currentField is undefined. Did you check the chrome console before running it on AVD ? Pls try to post the element in which you are trying to display the date as well.
For now, I am assuming that you are trying to do what the following code does
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date(Date.parse(currentField.val())) || new Date();
// Same handling for iPhone and Android
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
var newString = newDate.toString();
newString = newString.substring(0,15);
currentField.val(newString);
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
});
The element is as follows
<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>
Works like a charm !! Hope it helps !!
What I want to happen is simple - I just want a datepicker to display when I click a certain field.
However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.
The documentation from the plugin is incomplete.
I found a solution from this test project.
Steps are as follows:
Pre-requisite: phonegap/cordova-cli installed
Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
Add the ff. to index.html code:
Note: The datepicker won't show when you test it in your browser
....
<div class="form-group">
<label>Appointment</label>
<input type="text" class="form-control datepicker" id="appointment">
</div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function () {
$(document).on('click', '.datepicker', function () {
showDatePicker($(this), 'date');
});
$(document).on('click', '.timepicker', function () {
showDatePicker($(this), 'time');
});
$(document).on('click', '.datetimepicker', function () {
if (device.platform === "Android")
showDateTimePicker($(this));
else
showDatePicker($(this), 'datetime');
});
});
})(jQuery);
</script>
This is my working implementation. Input type is text, readonly.
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date',
allowOldDates : true
}, function(returnDate) {
var array = returnDate.split("/");
var day = array[2], month = array[1];
if (day <= 9)
day = "0" + day;
if (month <= 9)
month = "0" + month;
currentField.val(array[0] + "/" + month + "/" + day);
currentField.blur();
});
});
Why would you want to implement a custom date picker if there is an ative one available ?
You can simply use <input type="date"> to create the commonly known iOS date picker.
For more infos on input fields on mobile devices I suggest: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience

Categories