We Keep Coding

Evaluating if statements within switch expression

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)

Global Functions in ReactJS tells me 'not a function' [duplicate]

This question already has answers here:
JavaScript hoisting explanation
(4 answers)
Closed 3 years ago.
I have a GlobalFunction.js file with this.
function day(day) {
switch(day) {
case 0:
return "Sunday";
case 1:
return "Monday";
case 2:
return "Tuesday";
case 3:
return "Wednesday";
case 4:
return "Thursday";
case 5:
return "Friday";
case 6:
return "Saturday";
}
}
function month(month) {
switch(month) {
case 0:
return "January";
case 1:
return "February";
case 2:
return "March";
case 3:
return "April";
case 4:
return "May";
case 5:
return "June";
case 6:
return "July";
case 7:
return "August";
case 8:
return "September";
case 9:
return "October";
case 10:
return "November";
case 11:
return "December";
}
}
function styleTime(time) {
time = time[1].split(':');
// fetch
var hours = Number(time[0]);
var minutes = Number(time[1]);
var seconds = Number(time[2]);
// calculate
var timeValue;
if (hours > 0 && hours <= 12) {
timeValue= "" + hours;
} else if (hours > 12) {
timeValue= "" + (hours - 12);
} else if (hours == 0) {
timeValue= "12";
}
timeValue += (minutes < 10) ? ":0" + minutes : ":" + minutes; // get minutes
timeValue += (hours >= 12) ? " P.M." : " A.M."; // get AM/PM
return timeValue;
}
function nth(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
function styleDate(date) {
var verifyDay = new Date(date[0]);
var dayOfWeek = day(verifyDay.getDay()); //prints monday, tuesday, wednesday, etc
var year = verifyDay.getFullYear(); // prints the year
var month = month(verifyDay.getMonth());
var day = verifyDay.getDate();
var date = day + nth(verifyDay.getDate());
return dayOfWeek + ", " + month + " " + date + " " + year;
}
export function styleDateTime(dateString) {
var dateTime = dateString.split(" ");
return styleDate(dateTime) + " at " + styleTime(dateTime);
}
// default export
export default function() {
return 'default';
}
I import this into a js file like so.
import { styleDateTime } from "../GlobalFunctions"
I use it like so:
{styleDateTime(array.date)}
In the styleDate function, it tells me that day is not a function. why?

Because inside styleDate method you are creating a new variable with same name as day and that's why you are not able to access the day method. Use a different variable name, it will work.
Write it like this:
function styleDate(date) {
var verifyDay = new Date(date[0]);
var dayOfWeek = day(verifyDay.getDay()); //prints monday, tuesday, wednesday, etc
var year = verifyDay.getFullYear(); // prints the year
var month = month(verifyDay.getMonth());
// here
var new_day = verifyDay.getDate();
var date = new_day + nth(verifyDay.getDate());
return dayOfWeek + ", " + month + " " + date + " " + year;
}

It's because your local day variable in styleDate is shadowing the function defined outside of it. Rename it to something else.
If you think it shouldn't be shadowed because it's defined after the first usage, JavaScript applies hoisting which moves all the declarations to the beginning of the function, setting them to undefined until they are later set.
function styleDate(date) {
...
var myDay = verifyDay.getDate();
var date = myDay + nth(verifyDay.getDate());
...

How to get the value from variable in switch statement is javascript

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>

php Date Conversion to javaScript

Needs help in rewriting this php code in JavaScript
$date='20170721';
$stamps = strtotime($date);
$newdate = date('d M Y',$stamps);
$data = explode(' ', $newdate);
echo $data[0].' '.strtoupper($data[1]).' '.$data[2];
//output 2017 JUL 21
I am new in JavaScript this is what i have done so far
var date='20170721';
varstamps = strtotime($date);
var newdate = date('d M Y',$stamps);
var data = explode(' ', $newdate);
$data[0].' '.strtoupper($data[1]).' '.$data[2];

For better Result you can user https://momentjs.com/ Moment js
include moment js using
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
var date = '20170721';
moment(date).format('YYYY MMM DD');

Here's a solution
var date = '20170721';
var year = date.slice(0,4),
month = date.slice(4,6),
day = date.slice(-2);
// create new Date obj
date = new Date(year, month, day);
// format using toLocaleDateString
console.log(new Date(year, month, day).toLocaleDateString('en-GB'));
// custom format
console.log(date.getFullYear() + ' ' + (date.getMonth()) + ' ' + date.getDate())
//output 2017 JUL 21

Php :
$date='20170721';
$stamps = strtotime($date);
Javascript :
var idate = 1500588000; // unix timestamp returned from php ($stamps variable)
var jdate = new Date(idate * 1000);
var day = jdate.getDate();
var month = jdate.getMonth();
var year = jdate.getYear();
var fulldate = jdate.toDateString();
Reference : Javascript Date - set just the date, ignoring time?

Currently i dont think javascript supports date conversions as this, but heres a work around
var str='20170721';
var datee=str.slice(0,4)+'-'+str.slice(4,6)+'-'+str.slice(6,8);
var date = new Date(datee);
var newDate = date.toString('yyyy MMMM dd');
console.log(newDate);
// Or you can decide to do this without any external library
var num =parseInt(str.slice(4,6));
var month='';
switch(num)
{
case 0:
month="January";
break;
case 1:
month="February";
break;
case 2:
month="March";
break;
case 3:
month="April";
break;
case 4:
month="May";
break;
case 5:
month="June";
break;
case 6:
month="July";
break;
case 7:
month="August";
break;
case 8:
month="September";
break;
case 9:
month="October";
break;
case 10:
month="November";
break;
case 11:
month="December";
break;
default:
month="Invalid month";
}
console.log(str.slice(0,4)+' '+month+' '+str.slice(4,6));
<script src="http://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

dojo.ById not working

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.