This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
var d = new Date();
var day;
switch (d.getDay()) {
case 0 :
day = "Sunday";
break;
case 1 :
day = "Monday";
break;
case 2 :
day = "Tuesday";
break;
case 3 :
day = "Wednesday";
break;
case 4 :
day = "Thursday";
break;
case 5 :
day = "Friday";
break;
default :
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is : " ;
Add HTML and missing day and append at the end before assignment
var d = new Date();
var day;
switch (d.getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
default:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is : " + day;
<div id="demo"></div>
I am trying to create a function that loops through an array and returns the results. I than am trying to pass this function to another function that uses a switch statement to check the dates of the values returned from the passed in function to display the day of the week ex sunday, wednesday etc to the console. All three values in the array are strings, with two of them being date values while the other is not.
I am obviously missing something as myDate function only returns one value, the first value from the array, also when it gets passed to the findDate function it does not return the expected results.
var myDate = function() {
var input = ['10/11/2009', '11/10/2010', '-1'];
for (var i = 0; i < input.length; i++) {
var result = input[i];
console.log(result);
return result;
}
};
console.log(myDate());
function findDay(myDate) {
if (myDate !== -1) {
var date = new Date(myDate), day = "";
switch (date.toDateString().slice(0,3)) { //Pick the first 3 characters of a date string
case "Sun":
day = "Sunday";
break;
case "Mon":
day = "Monday";
break;
case "Tue":
day = "Tuesday";
break;
case "Wed":
day = "Wednesday";
break;
case "Thu":
day = "Thursday";
break;
case "Fri":
day = "Friday";
break;
default:
day = "Saturday";
break;
}
console.log(day);
}
else{
console.log(myDate + ' is not a valid date'); //If input is -1
}
}
findDay(myDate);
Sample Input
10/11/2009
11/10/2010
-1
Sample Output
Sunday
Wednesday
-1 is not a valid date
If the myDate function is meant to apply some other function (findDay) to the list of inputs, it will need to look like this:
var myDate = function( callback) {
var input = ['10/11/2009', '11/10/2010', '-1'];
// loop through list and apply callback to EACH item
for (var i = 0; i < input.length; i++) {
callback(input[i]);
}
};
function findDay(dateString) {
if (dateString != -1) {
var date = new Date(dateString), day = "";
switch (date.toDateString().slice(0,3)) { //Pick the first 3 characters of a date string
case "Sun":
day = "Sunday";
break;
case "Mon":
day = "Monday";
break;
case "Tue":
day = "Tuesday";
break;
case "Wed":
day = "Wednesday";
break;
case "Thu":
day = "Thursday";
break;
case "Fri":
day = "Friday";
break;
default:
day = "Saturday";
break;
}
console.log(day);
}
else{
console.log(dateString + ' is not a valid date'); //If input is -1
}
}
myDate(findDay);
Then you just need to modify findDay slightly so that it works on each date string that you give it. Here is an example, if this is what you had in mind:
https://jsfiddle.net/2mnxcpwt/
Your logic is unclear. Usually you have a function which is a callback and some iterator for the array which calls the callback for every element. For example like this:
var input = ['10/11/2009', '11/10/2010', '-1'],
output = input.map(findDay); // iterator with callback
function findDay(myDate) { // callback
var date,
days = { Sun: 'Sunday', Mon: 'Monday', Tue: 'Tuesday', Wed: 'Wednesday', Thu: 'Thursday', Fri: 'Friday', Sat: 'Saturday' };
if (myDate !== '-1') { // <-- changed to string!
date = new Date(myDate);
return days[date.toDateString().slice(0, 3)];
}
return myDate + ' is not a valid date';
}
document.write('<pre>' + JSON.stringify(output, 0, 4) + '</pre>');
I think the main problem was, that you checked if if (myDate !== -1) { and set for myDate in the array the value to [..., '-1']. So you wanted to compare a string with a number.
Additional to the problem above I have packed the task in one function:
function findmyDate ( input ) {
input.forEach( function (myDate,k) {
if (myDate !== '-1') {
var date = new Date(myDate), day = "";
switch (date.toDateString().slice(0,3)) { //Pick the first 3 characters of a date string
case "Sun":
day = "Sunday";
break;
case "Mon":
day = "Monday";
break;
case "Tue":
day = "Tuesday";
break;
case "Wed":
day = "Wednesday";
break;
case "Thu":
day = "Thursday";
break;
case "Fri":
day = "Friday";
break;
default:
day = "Saturday";
break;
}
console.log(day);
}
else{
console.log(myDate + ' is not a valid date'); //If input is -1
}
});
};
findmyDate( ['10/11/2009', '11/10/2010', '-1'] );
Test the function at https://jsfiddle.net/nrp24x0w/
First, your array is:
['10/11/2009', '11/10/2010', '-1']
And, later you have:
if (myDate !== -1)
Which will never be true since the array contains a string and you are checking for a number.
Next, inside your loop, you have:
for (var i = 0; i < input.length; i++) {
var result = input[i];
console.log(result);
return result;
}
There are two issues here:
The return statement is in the loop, causing the loop to terminate
upon the first iteration.
Inside the loop, the old result value is being
thrown out and the result variable is being reinitialized with the latest loop iteration value.
You should have:
var myDate = function() {
var input = ['10/11/2009', '11/10/2010', '-1'];
var result;
for (var i = 0; i < input.length; i++) {
result += input[i];
}
console.log(result);
return result;
Now, you say "I am trying to create a function that loops through an array and returns the results." But, you haven't said how those results should be packaged. What do you want? A delimited list? Another array? Have you considered:
input.forEach(function(){ . . . });
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Or:
var resultArray = input.map(function(){ . . . });
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Since you seem to just want to check an array, it is not clear why you need a second array or a second function, but here's an example that does the main job:
function checkArray(arr){
arr.forEach(function(value, index, arr){
if (value !== -1) {
var d = new Date(value), day = "";
switch (d.toDateString().slice(0,3)) { //Pick the first 3 characters of a date string
case "Sun":
day = "Sunday";
break;
case "Mon":
day = "Monday";
break;
case "Tue":
day = "Tuesday";
break;
case "Wed":
day = "Wednesday";
break;
case "Thu":
day = "Thursday";
break;
case "Fri":
day = "Friday";
break;
default:
day = "Saturday";
break;
}
alert(day);
}
else{
alert(myDate + ' is not a valid date'); //If input is -1
}
});
}
var input = ['10/11/2009', '11/10/2010', -1];
checkArray(input);
Parsing of strings by the Date constructor is strongly recommended against as it is largely implementation dependent and unreliable. The format "10/11/2009" is ambiguous, for some it's 11 October, for most it's 10 November. I'll guess you mean 11 October since that's a Sunday.
So you should never use the Date constructor (or Date.parse, they are the same for parsing) to parse strings, a simple function to parse m/d/y format and validate the result is:
function parseMDY(s) {
var b = s.split(/\D/);
var d = new Date(b[2], --b[0], b[1]);
return d && d.getMonth() == b[0]? d || new Date(NaN);
}
The result of date.toString() is entirely implementation dependent, there is nothing to ensure that the first three characters will be a day name so:
date.toDateString().slice(0,3)
might return anything. Far simpler is to use the built–in getDay method. If you must use a switch statement, then:
switch (date.getDay())
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
...
but
var days = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
var day = days[date.getDay()];
is much less to type.
I have attached a calendar and opening on my site but it doesn't seem to be working don't know why here is the code.
<script type="text/javascript">
switch(curday){
case 0:
day = "sunday";
break;
case 1:
day = "<h2>Monday</h2><br/>9:00-12:00 <br/> 12:00-13:00 Lunch<br/> 13:00-19:00<br/>";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "<h2>Wednesday</h2><br/>9:00-12:00 <br/> 12:00-13:00 Lunch<br/> 13:00-19:00<br/>";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "<h2>Friday</h2><br/>9:00-12:00 <br/> 12:00-13:00 Lunch<br/> 13:00-19:00<br/>";
break;
case 6:
day = "Saturday" "We are closed" ;
break;
}
document.write(day);
</script>
and this is code for the calender
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
I have a calendar widget which is working OK. The problem I have is when selecting a date - the code doesn't find the field I want to set to the selected date, and I can't see why not.
<xp:panel id="calendarHolder">
<script>
require([ "dijit/Calendar", "dojo/date", "dojo/domReady!", "dijit/registry" ],
function(Calendar, date){
new Calendar({ value: new Date(),
onValueSelected: function(date){calendarDateClicked(date);
}},"mycal");
//Set month in correct format
function setMonth(month){
switch(month)
{
case 1:
month = "Jan";
break;
case 2:
month = "Feb";
break;
case 3:
month = "Mar";
break;
case 4:
month = "Apr";
break;
case 5:
month = "May";
break;
case 6:
month = "Jun";
break;
case 7:
month = "Jul";
break;
case 8:
month = "Aug";
break;
case 9:
month = "Sep";
break;
case 10:
month = "Oct";
break;
case 11:
month = "Nov";
break;
case 12:
month = "Dec";
break;
}
return month;
}
//create Click action
function calendarDateClicked(date){
var d = new Date(date);
var month = (d.getMonth() + 1);
month = setMonth(month);
var day = '' + d.getDate() + ",";
var year = d.getFullYear();
var dateString = [month,day,year].join(" ");
dojo.byId('#{id:hiddenCalWidgetSelectedDate}').value = dateString
dojo.byId('#{id:calDate}').value = dateString;
XSP.partialRefreshPost("#{id:mainPanel}",{
onComplete: function() {
XSP.partialRefreshGet("#{id:sideViews}", {});
}
});//Post Value to server
}
});
</script>
<div id="mycal">
</div>
<div id="textbox">
<xp:inputText id="hiddenCalWidgetSelectedDate"
style="display:block;" value="#{sessionScope.selectedDate}">
<xp:this.defaultValue><![CDATA[#{javascript://
var d = new Date(/*Today*/);
var month = '' + (d.getMonth() + 1);
var day = '' + d.getDate();
var year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [day,month,year].join("/"); }]]></xp:this.defaultValue>
</xp:inputText></div>
</xp:panel>
The error I get is dojo.byId('#{id:hiddenCalWidgetSelectedDate}') is null
Any help would be appreciated.
Graeme
If you add a normal script block to an XPage, the EL will not get resolved.
You have to add your code inside a xp:scriptBlock.
I have a javascript variable which is defined from an input value.
$d = $('#date').val();
$myDateParts = $d.split("-");
$dflip = new Date($myDateParts[2], ($myDateParts[1]-1), $myDateParts[0]);
console.log($dflip);
$dflip = Wed Sep 19 00:00:00 UTC+0100 2012
How can i format the output to just:
Wed Sep 19
You can do something using substring or toDateString or both
for e.g:
var dateString = new Date(2012, 0, 31).toDateString();
var noYear = dateString.substring(0, dateString.length-5);
console.log(noYear);
Try with following code.
<script src="../../ui/jquery.ui.datepicker.js"></script>
$( "#datepicker" ).datepicker( "D M yy", dflip.val());
This may not be the cleanest, most efficient or best way to accomplish what you're looking for, but I created a function to return the date without the timezone. You can adjust the "theDate" variable to return only the parts of the date you want.
function properDate(){
var d = new Date();
var DayOfMonth = d.getDate();
var DayOfWeek = d.getDay();
var Month = d.getMonth();
var Year = d.getFullYear();
var Hours = d.getHours();
var Minutes = d.getMinutes();
var Seconds = d.getSeconds();
switch (DayOfWeek) {
case 0:
day = "Sun";
break;
case 1:
day = "Mon";
break;
case 2:
day = "Tue";
break;
case 3:
day = "Wed";
break;
case 4:
day = "Thu";
break;
case 5:
day = "Fri";
break;
case 6:
day = "Sat";
break;
}
switch (Month) {
case 0:
month = "Jan";
break;
case 1:
month = "Feb";
break;
case 2:
month = "Mar";
break;
case 3:
month = "Apr";
break;
case 4:
month = "May";
break;
case 5:
month = "Jun";
break;
case 6:
month = "Jul";
break;
case 7:
month = "Aug";
break;
case 8:
month = "Sep";
break;
case 9:
month = "Oct";
break;
case 10:
month = "Nov";
break;
case 11:
month = "Dec";
break;
}
var theDate = day + " " + month + " " + DayOfMonth + " " + Year + " " + Hours + ":" + Minutes + ":" + Seconds;
return theDate;
}
My DateExtentions library will do that - although it may be overkill if all you're doing is that one, simple format.
http://depressedpress.com/javascript-extensions/dp_dateextensions/
I can parse the date based on a passed mask and format the output however you like (it'll also do all sorts of date math and utility stuff so again, it might be heavier than you need).