Formatting getDate() in JavaScript - javascript

I have been playing around with this JavaScript to get the right format on my date output, but with no luck. I need this code to show as Month Day, Year. As of now it's showing dd/mm/yy.
Below is the script I'm using.
<script>
var tD = new Date();
var datestr = tD.getDate() + (tD.getMonth()+ 1) + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");
</script>

Here is a modification of another post here on Stack Overflow. I think this will do what you want.
var tD = new Date();
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var datestr = monthNames[tD.getMonth()] + " " + tD.getDate() + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");

I don't really get it. Is this, what you're looking for?
<script>
var tD = new Date();
var datestr = (tD.getMonth() + 1) + ' ' + tD.getDay() + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");
</script>

Related

Replacing 'document.write()'

Some javascript on my site places the user's device name as well as location into the text of the website using 'document.write()'
Recently it's been blocked by many browsers and the code isn't being executed.
How can I replace this to make it work correctly? I need it to load at the same time or before everything else.
Here are the two scripts I'm working with:
<script>
function x(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
c = x('city')
m = x('model')
b = x('brand')
phone = x('brand') + ' ' + x('model')
browser = x('browser')
os = x('os')
ip = x('ip')
isp = x('isp')
osversion = x('osversion')
browserversion = x('browserversion')
</script>
<script type="text/javascript">
var dayNames = Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
var today = monthNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear();
function get_date(days)
{return today = monthNames[now.getMonth()] + " " + (now.getDate() - days) + ", " + now.getFullYear();}
</script>
and this is how I'm attempting to implement it:
<div class="main-content flag" id="content1">
<h1>Congratulations <script>document.write(b);</script> User! Your <script>document.write(m);</script> Awesome!</h1>
<div style="text-align:left; width:100%; color:black; font-size:10px;">
<script type="text/javascript">document.write(today);</script>
</div>
</div>
Try this one.
<div class="main-content flag" id="content1">
<h1>Congratulations <span id="brand-elem"></span> User! Your <span id="model-elem"></span> Awesome!</h1>
<div id="today-elem" style="text-align:left; width:100%; color:black; font-size:10px;">
</div>
</div>
<script type="text/javascript">
document.getElementById('brand-elem').innerHTML = b;
document.getElementById('model-elem').innerHTML = m;
document.getElementById('today-elem').innerHTML = today;
</script>
Don't use document.write. Refer Why is document.write considered a "bad practice"?

<script> doesn't always load when opening page

So I have a script that basically refreshes the time consistently so the user sees the time with the seconds/mins/h etc. adding up.
For some reason, sometimes when I load the page it works, but most of the time no. This is very unusual and I'm wondering if anyone would have an input.
For styling purposes, the em tag really needs to stay in h1.
Here's my code:
<head>
<link rel="stylesheet" type="text/css" href="styling.css">
<h1>The Trade Shack<em id="demo"></em></h1>
<title>Homepage</title>
<script>
function getCurrentDate(){
var fullDate = new Date();
var day = fullDate.getDay();
var stringDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = fullDate.getMonth();
var stringMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var numDay = fullDate.getDate();
var year = fullDate.getFullYear();
var hour = fullDate.getHours();
var minute = fullDate.getMinutes();
var second = fullDate.getSeconds();
document.getElementById("demo").innerHTML = stringDays[day] + ", " + stringMonth[month] + " " + numDay + ", " + year + ", " + hour + ":" + minute + ":" + second;
}
setInterval(getCurrentDate,1000);
</script>
</head>
Wrap your setInterval in window.onload.
...
window.onload=function(){
setInterval(getCurrentDate,1000);
};
Additionally, to fix some problems you might have with your html later, move your <h1> from <head> to <body>.
First of all you should remove the h1 element (and all inside of it) and put that on the body tag of your document, then use the window.onload event and that's where you're going to call this pice of code setInterval(getCurrentDate,1000);
You can check here for use the window.onload
http://www.w3schools.com/jsref/event_onload.asp
I hope it works :)
Ensure the function works even if 'demo' is not found. Otherwise it can cause a blocking error and prevent further execution. And put <h1> within the body rather than the head.
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<title>Homepage</title>
<script>
function getCurrentDate() {
var demo = document.getElementById("demo");
if (!demo) {return;}
var fullDate = new Date();
var day = fullDate.getDay();
var stringDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = fullDate.getMonth();
var stringMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var numDay = fullDate.getDate();
var year = fullDate.getFullYear();
var hour = fullDate.getHours();
var minute = fullDate.getMinutes();
var second = fullDate.getSeconds();
demo.innerHTML = stringDays[day] + ", " + stringMonth[month] + " " + numDay + ", " + year + ", " + hour + ":" + minute + ":" + second;
}
setInterval(getCurrentDate, 1000);
</script>
</head>
<body>
<h1>The Trade Shack<em id="demo"></em></h1>
<!--More HTML here-->
</body>

not getting ng-model value

I am new to AngularJS.I am trying to get a newly changed value from a input tag using ng-model but it is returning me the previous value.Can anyone tell me what is wrong here?
{{eventDateControl}} is the model.
<div ng-controller="EventInfoController">
<form class="form-horizontal" ng-submit="saveEventInfo(eventData,alertType,eventDateControl)">
<div class="form-group bottom-border-field">
<label class="col-md-4 control-label">Event Date & Time:</label>
<div class="col-md-8">
<div class="input-group date form_datetime col-md-12"
data-date="1979-09-16T05:25:07Z"
data-date-format="MM dd, yyyy,HH:mm p"
data-link-field="dtp_input1">
<input id="currentDate" class="form-control" size="16" type="text" value="" ng-model="eventDateControl" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
</div>
controller
alertCallApp.controller('EventInfoController',
function($q, $scope,$rootScope,$timeout,$http,eventDetails,$stateParams,currentEventID,getUserDetails,alertAppLib,currentEventStatus,alertTypeDetails) {
$('.form_datetime').datetimepicker({
// language: 'fr',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
forceParse : 0,
showMeridian : 1
});
$scope.getEventDetails = function(){
// get updateTime in millisec and format in proper format
var udate = eventResponse.data.alertEvent.updateTime;
var cdate = eventResponse.data.alertEvent.createTime;
// converting updateTime in proper format
var d = new Date(udate);
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var date = d.getDate() + ' ' + monthNames[d.getMonth()] + ' '+ (d.getYear() + 1900) + '-' + d.getHours() + ':' + d.getMinutes()
var ampm = (d.getHours() >= 12) ? "PM" : "AM";
console.log('updateTime in expected format : '+ date+' '+ampm);
$scope.eventDateControl = date+' '+ampm;
// converting createTime in proper format
d = new Date(cdate);
monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
date = d.getDate() + ' ' + monthNames[d.getMonth()] + ' '+ (d.getYear() + 1900) + '-' + d.getHours() + ':' + d.getMinutes()
ampm = (d.getHours() >= 12) ? "PM" : "AM";
console.log('createTime in expected format : '+ date+' '+ampm);
$scope.createTime = date+' '+ampm;
} else {
errMsg = eventResponse.statusMessage;
}
});
}
$scope.saveEventInfo = function(eventData,alertType,eventDateControl){
console.log('eventDateControl : '+eventDateControl);
//GET DATE AND CHANGE IT TO MILLISECONDS
// converting createTime in proper format
var res = eventDateControl.split(" ");
var day = res[0];
var month = res[1];
var year = res[2];
var hours = res[3];
var res1 = res[2].split("-");
var year = res1[0];
var hm = res1[1].split(":");
var hours = hm[0];
var min = hm[1];
var date = new Date(''+year+','+month+','+day+','+hours+':'+min);
console.log('selected updateTime in ms: '+date.getTime());
}
fetching the new value here
$scope.saveEventInfo = function(eventData,alertType,eventDateControl){
//CHANGED DATE SHOULD COME HERE
console.log('eventDateControl : '+eventDateControl);
}
You need to write a change function for datetimepickerpicker and then apply the scope into it.
And use jquery plugin through directive to get better binding, In below directive i added change function & after changing we need to run digest cycle manually to update scope values.
Directive
app.directive('dateTimePicker', function() {
return {
restrict: 'A',
reuqire: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.datetimepicker({
// language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
onChangeDateTime: function(dp, $input) {
$scope.$apply(function() {
ngModel.$setViewValue($input.val());
});
}
});
}
}
});
HTML
<input id="currentDate" date-time-picker class="form-control" size="16"
type="text" value="" ng-model="eventDateControl"/>

Display javascript date genererator in submit form

This code is giving output correctly in button type but not in input type. I just want to display the month and year in Submit form.
<input type="submit" id="demo" value="Submit form">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
);
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.write(month_name[curr_month] + "," + curr_year);
}
</script>
js
function getDate() {
var month_name = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
var input = document.getElementById("demo");
input.value = month_name[curr_month] + "," + curr_year;
}
html - or if you want to click it and getDate() put it as onclick="getDate()" within the <input> html tag
<body onload="getDate()">
<input type="submit" id="demo" value="Submit form">
</body>
demo
http://jsfiddle.net/z26mevsv/
this will allso help you
<input type="submit" id="demo" value="Submit form" onclick="getDate();">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March","April", "May", "June","July", "August", "September","October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.write(month_name[curr_month] + "," + curr_year);
}
</script>
so in order to display the value there, you need to get the input element. You have the id="demo", and that is the best way to reference that element. try out the following code:
<input type="submit" id="demo" value="Submit form">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March","April", "May", "June","July", "August", "September","October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.getElementById('demo').value = month_name[curr_month] + "," + curr_year;
}
window.onload = function(){
getDate();
}
</script>
of course you need to call your function getDate() from somewhere, so I called that in the onload() function.

Add days from parameter

I need to add a certain amount of days to the date object using parameters in a radio button from an onclick event handler in JavaScript. When I simply add the day to the end it just adds a 1 etc on the end of the date. Any ideas?
var dateObject = new Date();
var month = dateObject.getMonth();
var monthArray = new Array("January", "February", "March", "April",
"May", "June", "July", "August",
"September","October","November","December");
function orderReadyDate(orderTime)
{
var dateToday = monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear();
document.forms[0].txtPickupDate.value = dateToday;
}
Here are my input buttons
<input type="radio" name="item" value="print_5x7" onclick="orderReadyDate(1)" />5x7 Prints(1 day)<br />
<input type="radio" name="item" value="poster" onclick="orderReadyDate(1)" />Poster (1 day)<br />
<input type="radio" name="item" value="mug" onclick="orderReadyDate(2)" />Coffee Mug (2 days)<br />
<input type="radio" name="item" value="shirt" onclick="orderReadyDate(3)" />T-shirt (3 days)</p>
You need to try this:- Notice the setDate method which will add up the date.
var newdate = new Date();
newdate.setDate(newdate.getDate() + orderTime);
var dateToday = monthArray[newdate.getMonth()] + " " +
newdate.getDate() + ", " +
newdate.getFullYear();
var dateToday = monthArray[month] + " "
+ (dateObject.getDate() + orderTime)
+ ", " + dateObject.getFullYear();

Categories