We Keep Coding

Bootstrap-table2 How to make custom text search filter on String month and date?

I am currently making a BootstrapTable with one column with a dataField of birthday, which is a string in the format of "day/month" or "3/10" for October 3rd as an example. I successfully made a formatter which transformed every string like "3/10" to show up as a string like "October 3rd" on the table. I want to add a filter: textFilter and currently using a default. The problem is, if the user types in "October", nothing shows up. You type in "10" for October 3rd to show up. I am trying to implement a custom filter such that if if the user types in a substring like "Octo", all examples of October birthdays would show up and non October dates would be filtered. How can I implement something like this? This is my first attempt at trying to implement something like this below.
filterByPrice = (filterVal, data) => {
if (filterVal) {
var fields = data.birthday.split('/');
var month = parseInt(fields[1]);
var day = parseInt(fields[0]);
switch(month){
case 1:
month = "January";
break;
case 2:
month = "February";
break;
case 3:
month = "March";
break;
case 4:
month = "April";
break;
case 5:
month = "May";
break;
case 6:
month = "June";
break;
case 7:
month = "July";
break;
case 8:
month = "August";
break;
case 9:
month = "September";
break;
case 10:
month = "October";
break;
case 11:
month = "November";
break;
case 12:
month = "December";
}
var dateString = month + " " + day
data.filter(dateString.includes(filterVal));
}
return data;
const {columns} = {
columns: [{
dataField: 'birthday',
text: 'Birthday',
filter: textFilter({
onFilter: this.birthdayFilter
}),
formatter: birthdayFormatter, //successfuly transforms "10/3" into "October 3rd" function.
}]
}

I figured it out. Turns out there is a parameter called filterValue that searches based on the formatter.
{
dataField: 'birthday',
text: 'Birthday',
filter: textFilter(),
filterValue: birthdayFormatter,
formatter: birthdayFormatter
}

Why is this simple code giving an error? [duplicate]

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>

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>

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.

Javascript date format without timezone

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).