We use AG Grid and I can see that in the date filter we have 'This Week', 'This Quarter', 'This Month', 'This Year' etc. But our year is a business year that runs from April to March. How can I add that option to the filter?
Based on the date filters that you list, I am fairly sure that you are using AdapTable - our AG Grid add-on.
If so, then you simply need to add a Custom Predicate in the AdapTableQLOptions section of AdapTable Options and make it available for all Date column filters.
Based on your question something like this should do the trick:
adaptableQLOptions: {
customPredicateDefs: [
{
id: 'business_year',
moduleScope: ['filter'],
columnScope: {
DataTypes: ['Date']
},
label: 'Business Year',
handler: ({ value, inputs }) => {
const businessYearStart: Date = new Date(2022, 3, 1);
const businessYeaEnd: Date = new Date(2023, 2, 31);
return value >= businessYearStart && value <= businessYeaEnd;
},
},
],
}
This will make that filter appear in Quick Filter bar dropdown for all Column Filters.
See more at: https://docs.adaptabletools.com/guide/adaptable-ql-predicate-custom
I am using javascript date range picker component (https://www.daterangepicker.com/).
Localization is well handled on all levels except in one case I do not know how to correctly set it up.
On the screenshot you can see that everything is in german, except for the one marked with arrow.
This value is set by
locale: {
format: 'MMMM D, YYYY',
I do not know how I can translate the MMMM part.
Here is the whole daterangepicker code.
function ranges_locale($langcode) {
var _default_ranges = {
next_7_days: [moment(), moment().add(7, 'days')],
tomorrow: [moment().add(1, 'days'), moment().add(1, 'days')],
today: [moment(), moment()],
yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
last_7_days: [moment().subtract(6, 'days'), moment()],
last_30_days: [moment().subtract(29, 'days'), moment()],
this_month: [moment().startOf('month'), moment().endOf('month')],
last_month: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
var _ranges = {
'en': {
'Next 7 Days': _default_ranges.next_7_days,
'Tomorrow': _default_ranges.tomorrow,
'Today': _default_ranges.today,
'Yesterday': _default_ranges.yesterday,
'Last 7 Days': _default_ranges.last_7_days,
'Last 30 Days': _default_ranges.last_30_days,
'This Month': _default_ranges.this_month,
'Last Month': _default_ranges.last_month,
},
'de': {
'Nächste 7 Tage': _default_ranges.next_7_days,
'Morgen': _default_ranges.tomorrow,
'Heute': _default_ranges.today,
'Gestern': _default_ranges.yesterday,
'Letzte 7 Tage': _default_ranges.last_7_days,
'Letzte 30 Tage': _default_ranges.last_30_days,
'Dieser Monat': _default_ranges.this_month,
'Letzter Monat': _default_ranges.last_month,
}
};
target.daterangepicker({
"opens": "center",
"maxSpan": {
"days": 366
},
locale: {
format: 'MMMM D, YYYY',
applyLabel: tc('Apply'),
cancelLabel: tc('Cancel'),
customRangeLabel: tc('Custom Range'),
daysOfWeek: [
tc('Su'), tc('Mo'), tc('Tu'), tc('We'), tc('Th'), tc('Fr'), tc('Sa')
],
monthNames: [
tc('January'), tc('February'), tc('March'), tc('April'), tc('May'), tc('June'), tc('July'), tc('August'), tc('September'), tc('October'), tc('November'), tc('December')
],
firstDay: 1
},
ranges: ranges_locale(currentLanguage),
"alwaysShowCalendars": true,
"startDate": target.attr('start-date'),
"endDate": target.attr('end-date'),
});
Thank you.
Date range picker is using moment under the hood so you can do some customisation to replace the english month to german month.
Play the code below to see if it can do what you want:
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
<script>
$(function () {
// update locale to de and customize the MMM, MMMM translation
moment.updateLocale("de", {
months : ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
monthsShort : ['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez']
});
$('input[name="daterange"]').daterangepicker({
"opens": "center",
"maxSpan": {
"days": 366
},
locale: {
format: 'MMMM D, YYYY',
applyLabel: tc('Apply'),
cancelLabel: tc('Cancel'),
customRangeLabel: tc('Custom Range'),
daysOfWeek: [
tc('Su'), tc('Mo'), tc('Tu'), tc('We'), tc('Th'), tc('Fr'), tc('Sa')
],
monthNames: [
tc('January'), tc('February'), tc('March'), tc('April'), tc('May'), tc('June'),
tc('July'), tc('August'), tc('September'), tc('October'), tc('November'), tc('December')
],
firstDay: 1
},
// ranges: ranges_locale(currentLanguage),
"alwaysShowCalendars": true,
// "startDate": today, //target.attr('start-date'),
// "endDate": target.attr('end-date'),
});
})
const germanMapping = {
'Su': 'So',
'Mo': 'Mo',
'Tu': 'Di',
'We': 'Mi',
'Th': 'Do',
'Fr': 'Fr',
'Sa': 'Sa',
'January': 'Januar',
'February': 'Februar',
'March': 'März',
'April': 'April',
'May': 'Mai',
'June': 'Juni',
'July': 'Juli',
'August': 'August',
'September': 'September',
'October': 'Oktober',
'November': 'November',
'December': 'Dezember',
"Apply": "Anwenden",
"Cancel": "Stornieren"
}
const tc = (val) => germanMapping[val]
</script>
</body>
</html>
Since DataRangePicker manages date using moment, if you want to change bottom label language you should add this import:
import "moment/locale/de";
and the result is:
Here a codesandbox example.
I didn't find a direct solution, but a workaround.
What if you change the months with jQuery? You get somehow the current language (one way is probably with <html lang="en">) and then change the month string.
It's not the nicest solution, but it should work.
trying to get better at making my code less dense but I'm stumped on this one. what's the best way to use a dropdown menu to choose between options 1-24, while the array is nested within an object?
I am trying to make a chrome extension to create notifications for different time functions from the local time (ie 1hr, 3hrs, 12hrs, etc)
I know it works with this array here:
var d = new Dropdown({
id: 'd',
val: 'custom:',
data: ['1 hour', '2 hours', '3 hours', '4 hours', '5 hours', '6 hours', '7 hours', '8 hours', '9 hours', '10 hours', '11 hours', '12 hours', '13 hours', '14 hours', '15 hours', '16 hours', '17 hours', '18 hours', '19 hours', '20 hours', '21 hours', '22 hours', '23 hours', '24 hours'],
cb: function cb(newval) {
alert(newval);
}
});
for the future, to avoid the rewriting of 24 separate options would this logic work? it returns the items as an array of strings with the values being updated as the first parameter, but I am not sure if it's bad practice.
let h = Array.from(Array(24).toString(),
(_hour, index) => `${[index + 2]} hours`).map(String);
const itr = h.values();
console.log(Array.isArray(h)); // outputs true
console.log(itr); // outputs {[Iterator]}
// here's where I get lost
if there's an easier way that I'm just missing please let me know. I prefer this to the html input, since I am not messing with dates in the timer, just logging the local time +n.
Use map and check to use plural or not.
const hours = new Array(24).fill(0).map((_, i) => `${i+1} hour${i > 0 ? 's' : ''}`)
console.log(hours)
You can use spread the array and then use map() on it.
const arr = [...Array(24)].map((_, i) => `${i + 1} hours`);
console.log(arr)
I'm using the https://github.com/skratchdot/react-bootstrap-daterangepicker in my app. If I select a custom range the input is updated after hitting apply. If I select a predefined range then the widget closes wihtout hitting the apply button. Also the predefined range is not written to the input.
Here is the code of the react class:
class DateTimePicker extends React.Component {
constructor(props) {
super(props);
this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
this.ranges = {
'Today': [moment().startOf('day'), moment().endOf('day')],
'Yesterday': [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days') ],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
};
this._handleApply = this._handleApply.bind(this);
}
_handleApply(event, picker) {
this.props.onChange(
picker.startDate.format(this.DATE_FORMAT),
picker.endDate.format(this.DATE_FORMAT));
}
render() {
let startDate = moment(this.props.startDate);
let endDate = moment(this.props.endDate);
let start = startDate.format(this.DATE_FORMAT);
let end = endDate.format(this.DATE_FORMAT);
let label = start + ' to ' + end;
if (start === end) {
label = start;
}
let locale = {
format: 'YYYY-MM-DD HH:mm:ss',
separator: ' to ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek(),
};
return (
<div>
Time frame:<br/>
<DatetimeRangePicker
timePicker
timePicker24Hour
autoUpdateInput
alwaysShowCalendars
locale={locale}
startDate={startDate}
endDate={endDate}
ranges={this.ranges}
onApply={this._handleApply}
>
<div className='input-group'>
<input type='text' className='form-control' defaultValue={label}/>
<span className='input-group-btn'>
<button className='btn btn-default date-range-toggle'>
<BootstrapGlyphicon glyphicon='calendar'/>
</button>
</span>
</div>
</DatetimeRangePicker>
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The problem was solved by exchanging the "defaultValue" prop in a "value" prop. Now the input looks like this:
<input type='text' className='form-control' value={label} onChange={this._inputChanged}/>
I still don't know the background. If someone has detailed information I'm still interested.
I am using datatables v1.10.11 and Jquery v 2.2.0.
All is working as expected, however I would like to add another date filter to my existing datepicker.
I would like to filter items that are older than 3 years (as of today's date).
I was looking at http://momentjs.com/docs/#/query/is-after/ but not sure if that's what I need, or how to incorporate it?
My code so far is as follows;
var table = $('#items').DataTable({});
$("#myInputTextField2").daterangepicker({
autoUpdateInput: false,
"ranges": {
"Today": [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last Year': [moment().subtract(365, 'days'), moment()],
'Last 3 Years': [moment().subtract(1095, 'days'), moment()]
// Over 3 years old option here
}
});
Just to clarify, I would like to filter items that are older than three years.
The only way I can currently get it to work is set 'Over 3 years' as follows;
'Over 3 Years': [moment("1970-01-01"), moment().subtract(3, 'years')]
I'm sure there is a better way?
Any help appreciated.
Don't use
moment().subtract(1095, 'days')
It's not always "3 years", use
moment().subtract(3, 'years')
to consider leap years
Do you have a minimal date?
So as the syntax is "from", "to" it could be something like
'Over 3 Years': [moment("1492-10-12"), moment().subtract(3, 'years')]