We have some dashboards that have widgets as filters. One of these is a Blox widget that functions as a date filter, which I created with help from the community here. I recently added presets to the date filter to make it easier and faster to apply date filtering.
Create a Blox Widget
Paste the script below in the script editor section. {
"style": ".blox-slides button:hover{background-color:#014E66 !important;} .date-input-container { position: relative; } .date-input-container input[type='date'] { cursor: pointer; } .date-input-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer; } .date-input-container input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 10px; width: 20px; height: 20px; cursor: pointer; z-index: 2; }",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"showButtons": false
},
"script": "setTimeout(function() { const fromInput = document.getElementById('SelectVal_from'); const toInput = document.getElementById('SelectVal_to'); function formatDate(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return year + '-' + month + '-' + day; } function setDates(fromDate, toDate) { if (fromInput) fromInput.value = formatDate(fromDate); if (toInput) toInput.value = formatDate(toDate); } function getDateRanges() { const today = new Date(); const currentYear = today.getFullYear(); const currentMonth = today.getMonth(); const currentQuarter = Math.floor(currentMonth / 3); return { last30days: { from: new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000), to: today }, quarter: { from: new Date(currentYear, currentQuarter * 3, 1), to: new Date(currentYear, (currentQuarter + 1) * 3, 0) }, ytd: { from: new Date(currentYear, 0, 1), to: today }, lastyear: { from: new Date(currentYear - 1, 0, 1), to: new Date(currentYear - 1, 11, 31) } }; } const ranges = getDateRanges(); document.querySelectorAll('[data-filter-type]').forEach(function(btn) { btn.addEventListener('click', function() { const filterType = this.getAttribute('data-filter-type'); if (ranges[filterType]) { setDates(ranges[filterType].from, ranges[filterType].to); } }); }); if (fromInput) { fromInput.addEventListener('click', function(e) { if (e.target.tagName === 'INPUT') { e.target.showPicker ? e.target.showPicker() : e.target.click(); } }); fromInput.style.cursor = 'pointer'; } if (toInput) { toInput.addEventListener('click', function(e) { if (e.target.tagName === 'INPUT') { e.target.showPicker ? e.target.showPicker() : e.target.click(); } }); toInput.style.cursor = 'pointer'; } }, 1000);",
"body": [
{
"type": "Container",
"width": "90%",
"style": {
"margin": "0 auto"
},
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "date-preset",
"title": "Last 30 Days",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterType": "last30days",
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
},
{
"type": "date-preset",
"title": "This Quarter",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterType": "quarter",
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
},
{
"type": "date-preset",
"title": "Year to Date",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterType": "ytd",
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
},
{
"type": "date-preset",
"title": "Last Year",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterType": "lastyear",
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
}
]
},
{
"type": "Container",
"style": {
"display": "flex",
"flexDirection": "row",
"justifyContent": "space-between",
"marginTop": "20px",
"gap": "10px"
},
"items": [
{
"type": "Container",
"style": {
"width": "48%"
},
"items": [
{
"type": "TextBlock",
"text": "From",
"weight": "lighter",
"color": "black"
},
{
"type": "Container",
"style": {
"position": "relative"
},
"items": [
{
"type": "Input.Date",
"id": "SelectVal_from",
"placeholder": "mm/dd/yyyy",
"calendar": true,
"style": {
"width": "100%",
"padding": "14px",
"background-color": "#F4F4F8",
"border-radius": "8px",
"border": "1px solid #ccc",
"font-size": "16px",
"cursor": "pointer"
}
}
]
}
]
},
{
"type": "Container",
"style": {
"width": "48%"
},
"items": [
{
"type": "TextBlock",
"text": "To",
"weight": "lighter",
"color": "black"
},
{
"type": "Container",
"style": {
"position": "relative"
},
"items": [
{
"type": "Input.Date",
"id": "SelectVal_to",
"placeholder": "mm/dd/yyyy",
"calendar": true,
"style": {
"width": "100%",
"padding": "14px",
"background-color": "#F4F4F8",
"border-radius": "8px",
"border": "1px solid #ccc",
"font-size": "16px",
"cursor": "pointer"
}
}
]
}
]
}
]
},
{
"type": "ActionSet",
"style": {
"marginTop": "20px",
"text-align": "center"
},
"actions": [
{
"type": "DateX",
"id": "submit_btn",
"title": "Apply",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
},
{
"type": "filter-date-clear",
"title": "Clear",
"style": {
"color": "white",
"background-color": "#007FAA"
},
"data": {
"FilterFields": [
"[Dm_dates.date_data (Calendar)]"
]
}
}
]
}
]
}
]
}
Create the necessary actions for the buttons to work:
date-preset const filterType = payload.data.FilterType;
const filterDims = payload.data.FilterFields;
const dash = payload.widget.dashboard;
const now = new Date();
const yyyy = now.getFullYear();
const mm = String(now.getMonth() + 1).padStart(2, '0');
const dd = String(now.getDate()).padStart(2, '0');
const today = `${yyyy}-${mm}-${dd}`;
let fromDate = '';
let toDate = today;
//Year to date
if (filterType === 'ytd') {
fromDate = `${yyyy}-01-01`;
//Quarter
} else if (filterType === 'quarter') {
const q = Math.floor(now.getMonth() / 3);
const startMonth = q * 3 + 1;
fromDate = `${yyyy}-${String(startMonth).padStart(2, '0')}-01`;
//Last Year
} else if (filterType === 'lastyear') {
fromDate = `${yyyy - 1}-01-01`;
toDate = `${yyyy - 1}-12-31`;
// Last 30 days: from 30 days ago to today
} else if (filterType === 'last30days') {
const pastDate = new Date(now);
pastDate.setDate(pastDate.getDate() - 30);
const pastY = pastDate.getFullYear();
const pastM = String(pastDate.getMonth() + 1).padStart(2, '0');
const pastD = String(pastDate.getDate()).padStart(2, '0');
fromDate = `${pastY}-${pastM}-${pastD}`;
} else {
console.log('Unknown FilterType:', filterType);
if (typeof sendResponse === 'function') sendResponse(false);
return;
}
let newFilter = {};
$('#SelectVal_from').val(fromDate);
$('#SelectVal_to').val(toDate);
newFilter = {
jaql: {
dim: "",
filter: {
from: fromDate,
to: toDate
}
}
};
filterDims.forEach(function(dim) {
newFilter.jaql.dim = dim;
dash.filters.update(newFilter, {
refresh: true,
save: true
});
});
Datex -- Apply button var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
const filVal_from = payload.data.SelectVal_from == '' ? '1800-01-01' : payload.data.SelectVal_from;
const filVal_to = payload.data.SelectVal_to == '' ? '2100-01-01' : payload.data.SelectVal_to;
const filterDims = payload.data.FilterFields;
const dash = payload.widget.dashboard;
let newFilter = {};
console.log(filVal_from);
console.log(filVal_to);
newFilter = {
jaql: {
dim: "",
filter: {
from: filVal_from,
to: filVal_to
}
}
};
filterDims.forEach(function (dim) {
newFilter.jaql.dim = dim;
dash.filters.update(newFilter, { refresh: true, save: true })
})
Clear dates var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
const filVal_from = "1800-01-01"
const filVal_to = '2100-01-01'
const filterDims = payload.data.FilterFields;
const dash = payload.widget.dashboard;
let newFilter = {};
newFilter = {
jaql: {
dim: "",
filter: {
from: filVal_from,
to: filVal_to
}
}
};
$('#SelectVal_from').val('');
$('#SelectVal_to').val('');
filterDims.forEach(function (dim) {
newFilter.jaql.dim = dim;
dash.filters.update(newFilter, { refresh: true, save: true })
})
Save everything and try it out.
