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>
Related
I've started using UglifyJS, and the way it nested some of the if statements within the switch expression was peculiar. I'm struggling to find any documentation on it. Neither Mozilla nor W3Schools say anything explicit about it. The script is running fine, I would just like to know more about how.
Global variable:
var today = new Date();
Original script:
function date(date = today) {
if (date !== today) { date = new Date(date) };
var year = date.getFullYear().toString(),
month = (date.getMonth() + 1).toString(),
day = date.getDate().toString(),
shortDay,
longDay;
if (month.length === 1) { month = "0" + month };
if (day.length === 1) { day = "0" + day };
switch (date.getDay()) {
case 0: shortDay = 'Sun'; longDay = "Sunday"; break;
case 1: shortDay = 'Mon'; longDay = "Monday"; break;
case 2: shortDay = 'Tue'; longDay = "Tuesday"; break;
case 3: shortDay = 'Wed'; longDay = "Wednesday"; break;
case 4: shortDay = 'Thu'; longDay = "Thursday"; break;
case 5: shortDay = 'Fri'; longDay = "Friday"; break;
case 6: shortDay = 'Sat'; longDay = "Saturday"; break;
};
return {
full: year + '-' + month + '-' + day + ' ' + shortDay,
mmddyyyy: month + '/' + day + '/' + year,
mmddyy: month + '/' + day + '/' + year.substring(2),
md: (date.getMonth() + 1).toString() + '/' + date.getDate().toString(),
year, month, day, shortDay, longDay
};
};
UglifyJS compressed script (reformatted for readability):
function date(date = today) {
var shortDay, longDay,
year = (date = date !== today ? new Date(date) : date).getFullYear().toString(),
month = (date.getMonth() + 1).toString(),
day = date.getDate().toString();
switch (1 === month.length && (month = "0" + month), 1 === day.length && (day = "0" + day), date.getDay()) {
case 0: shortDay = "Sun", longDay = "Sunday"; break;
case 1: shortDay = "Mon", longDay = "Monday"; break;
case 2: shortDay = "Tue", longDay = "Tuesday"; break;
case 3: shortDay = "Wed", longDay = "Wednesday"; break;
case 4: shortDay = "Thu", longDay = "Thursday"; break;
case 5: shortDay = "Fri", longDay = "Friday"; break;
case 6: shortDay = "Sat", longDay = "Saturday"
}
return {
full: year + "-" + month + "-" + day + " " + shortDay,
mmddyyyy: month + "/" + day + "/" + year,
mmddyy: month + "/" + day + "/" + year.substring(2),
md: (date.getMonth() + 1).toString() + "/" + date.getDate().toString(),
year: year, month: month, day: day,
shortDay: shortDay, longDay: longDay
}
}
I believe that this is the part that is the most peculiar:
switch (1 === month.length && (month = "0" + month), 1 === day.length && (day = "0" + day), date.getDay()) {
case 0: shortDay = "Sun", longDay = "Sunday"; break;
case 1: shortDay = "Mon", longDay = "Monday"; break;
case 2: shortDay = "Tue", longDay = "Tuesday"; break;
case 3: shortDay = "Wed", longDay = "Wednesday"; break;
case 4: shortDay = "Thu", longDay = "Thursday"; break;
case 5: shortDay = "Fri", longDay = "Friday"; break;
case 6: shortDay = "Sat", longDay = "Saturday"
}
Comma operator
First of all, there is a comma operator in JavaScript which always returns the last element.
For example:
const x = (1, 2, 3, 4, 5)
console.log(x) // 5
So this:
switch (1 === month.length && (month = "0" + month), 1 === day.length && (day = "0" + day), date.getDay()) {
Looks exactly like this:
switch (date.getDay()) {
From the switch's point of view.
&& operator
Also, && operator stops if the left operand is falsy:
false && console.log('something') // doesn't log anything
true && console.log('something') // logs something
So:
// month is equal to '0' + month, but only if 1 === month.length
1 === month.length && (month = "0" + month)
// same here
1 === day.length && (day = "0" + day)
var day = "Sunday";
var x;
switch (day) {
case 0:
var x = 5;
day = "Sunday";
break;
case 1:
day = "Monday";
break;
}
document.getElementById("demo").innerHTML = "Today is " + day + " " + x;
<p id="demo"></p>
I want to get output as Today is Sunday 5
but I am getting the output as Today is Sunday undefined
How can get the value as 5 instead of undefined???
it is because of mistake in switch statement you are using number instead of day
like case 0: instead of case "sunday"
that is the mistake
var day = "Sunday";
var x;
switch (day) {
case "Sunday":
var x = 5;
day = "Sunday";
break;
case "Monday":
day = "Monday";
break;
}
document.getElementById("demo").innerHTML = "Today is " + day + " " + x;
<p id="demo"></p>
you can try like this too with numbers
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)
This example uses the weekday number to calculate the weekday name:
<p id="demo"></p>
<script>
var day;
var x=0;
switch (new Date().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;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day + x;
</script>
How can get the value as 5 instead of undefined???
variable in javascript will be initialized to undefined .so is out puts undefined because it didn't set to 5 in switch case (fails in condition to assing)
Answer is pretty simple:
switch (day) {
case 0:
var x = 5;
day = "Sunday";
break;
case 1:
day = "Monday";
break;
}
In the above code switch(day) you are passing a string "Sunday " and in cases matching it with an int type like case 0,it is not possible so try to pass an int in switch() or use case like case "Sunday":
switch (day) {
case "Sunday":
var x = 5;
day = "Sunday";
break;
case "anyday"://use case as you want
day = "anyday";
break;
}
You might find it easier to use an object to hold a set of keys/values. You can then check the object using the value held in day.
const days = {
sunday: 5,
monday: 2
};
let day = "Sunday";
const demo = document.getElementById('demo');
demo.innerHTML = "Today is " + day + " " + days[day.toLowerCase()];
<p id="demo"></p>
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).