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.
Related
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.
I am using ngx-daterangepicker-material for date picker in angular 9 project. I have requirement that, when user selects start date than 60 days from start date to the future and past should be not be selectable
For example, if user select start date 1st Jan 2021 than end date between 1st of March 2021(60 days future) and 1st of November 2020(60 days past) should not be selectable for user. rest all end date should be selectable
Tried doing it with minDate, maxDate but wasn't able to do it.
Thanks in advance!
input
type="text"
ngxDaterangepickerMd
[(ngModel)]="selected"
(rangeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[showCustomRangeLabel]="true"
[alwaysShowCalendars]="true"
[ranges]="ranges"
[linkedCalendars]="true"
[showClearButton]="false"
[isInvalidDate] = "isInvalidDate"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput"
/>
constructor() {
this.maxDate = moment().add(2, 'weeks');
this.minDate = moment().subtract(3, 'days');
this.alwaysShowCalendars = true;
this.keepCalendarOpeningWithRange = true;
this.showRangeLabelOnInput = true;
this.selected = {
startDate: moment().subtract(1, 'days'),
endDate: moment().subtract(1, 'days'),
};
}
rangeClicked(range) {
console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
console.log('[datesUpdated] range is : ', range);
}
export class DateRangeComponent implements OnInit {
selected: any;
alwaysShowCalendars: boolean;
showRangeLabelOnInput: boolean;
keepCalendarOpeningWithRange: boolean;
maxDate: moment.Moment;
minDate: moment.Moment;
ranges: any = {
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'),
],
};
isInvalidDate = (m: moment.Moment) => {
return this.invalidDates.some(d => d.isSame(m, 'day'));
};
constructor() {
this.maxDate = moment().add(2, 'weeks');
this.minDate = moment().subtract(3, 'days');
this.alwaysShowCalendars = true;
this.keepCalendarOpeningWithRange = true;
this.showRangeLabelOnInput = true;
this.selected = {
startDate: moment().subtract(1, 'days'),
endDate: moment().subtract(1, 'days'),
};
}
rangeClicked(range) {
console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
console.log('[datesUpdated] range is : ', range);
}
}
I have a list of objects with start and end times:
let times = [
{start: moment().add(1, 'days'), end: moment().add(2, 'days')},
{start: moment().add(1, 'days'), end: moment().add(2, 'days')},
{start: moment().add(4, 'days'), end: moment().add(5, 'days')},
{start: moment().add(1, 'days'), end: moment().add(7, 'days')},
{start: moment().add(2, 'days'), end: moment().add(3, 'days')},
]
I'd like to sort these times by start time (earliest to latest) while breaking ties with end time (shorter end time comes first).
So the results would look like this:
let sortedTimes = [
{start: moment().add(1, 'days'), end: moment().add(2, 'days')},
{start: moment().add(1, 'days'), end: moment().add(2, 'days')},
{start: moment().add(1, 'days'), end: moment().add(7, 'days')},
{start: moment().add(2, 'days'), end: moment().add(3, 'days')},
{start: moment().add(4, 'days'), end: moment().add(5, 'days')},
]
Is there a preferred Javascript way to do this with higher order functions/ minimal syntax? I began writing a script but the logic contains a lot of if - else if - else syntax, was wondering if there was a better way. Thanks again!
From the looks of it, I'm assuming you're using moment.js. This doesn't utilize a higher order function, but just uses the Array.prototype.sort method with a custom comparator function and the syntax is pretty terse:
times.sort(function(a, b) {
return a.start.isBefore(b.start) ? -1 : a.start.isSame(b.start) ? a.end.isBefore(b.end) ? -1 : 1 : 1;
});
Written out:
times.sort(function(a, b) {
if (a.start.isBefore(b.start)) {
return -1; // a before b
} else if (a.start.isSame(b.start)) {
// break tie on end
if (a.end.isBefore(b.end)) {
return -1; // a before b
} else {
return 1; // b before a
}
} else {
return 1; // b before a
}
}
Here's a plunkr if you want to see it in action.
Perhaps lodash sortBy:
_.sortBy(times, ['start', 'end']);
See:
https://github.com/lodash/lodash/blob/master/dist/lodash.core.js#L2130-L2139
I have a drop down list(screenshot attached),when we select any one like this year so how can we send StartIndex and EndIndex in backend using date Object using javascript,angular js.
Thanks In Advance any help will be appriciated
StatIndex:2016-01-01T00:00:00+5:30
EndIndex :2016-12-31T23:59:59+5:30
code for Index Range
this.indexRanges = ['This Year', 'Last Year', 'This Quarter', 'Last Quarter', 'This Month', 'Last Month', 'This Week',
'Last Week', 'Last 72 Hours', 'Last 48 Hours', 'Last 24 Hours', 'Today', 'Yesterday', 'Last Hours', 'This Hours',
'This 30 Minutes', 'Last 30 Minutes', 'This 15 Minutes', 'Last 15 Minutes', 'This 10 Minutes', 'Last 10 Minutes'];
send in backend using date Object using javascript,angular js
You most likey want the start date:
StatIndex:2016-01-01T00:00:00+5:30
This can be converted to a Date object quite easily using the Date constructor. For example:
var StatIndex = '2016-01-01T00:00:00+5:30';
const date = Date(StatIndex);
const toSend = {date:date};
const json = JSON.stringify(toSend);
As #Hassan Tariq mentioned in the comments, you need to write your own methods for it. To help you with there is a good library to play with dates moment.js
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')]