I am using date range picker and I need to setup some dynamic options inside it.
I have format to set the values but When I am trying to set some keys inside key value pair, I am getting a syntax error.
This is my code:
$scope.currenrYear = new Date().getFullYear();
$scope.pastYear = $scope.currenrYear - 1;
$scope.pastYearText = "During "+ $scope.pastYear;
var specifiedDateRangeText = 'Specified date range';
$scope.createdOnDatePickerOptions = {
showDropdowns: true,
autoUpdateInput: true,
buttonClasses: 'btn',
applyButtonClasses: ' btn-primary btn-action',
cancelButtonClasses: ' btn-default btn-cancel',
locale: {
applyLabel: "Apply",
cancelLabel: 'Cancel',
customRangeLabel: specifiedDateRangeText,
separator: ' - ',
format: "MM/DD/YYYY"
},
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 14 Days': [moment().subtract(13, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'Last 90 Days': [moment().subtract(89, 'days'), moment()],
'Last 180 Days': [moment().subtract(179, 'days'), moment()],
'Last 365 Days': [moment().subtract(364, 'days'), moment()],
'During 2021' : [moment("01/01/"+$scope.pastYear, "MM/DD/YYYY"), moment("12/31/"+$scope.pastYear, "MM/DD/YYYY")]
}
};
Now I want to change "During 2021" to a dynamic key as "During + last Year". I am trying using following options
$scope.pastYearText : [moment("01/01/"+$scope.pastYear, "MM/DD/YYYY"), moment("12/31/"+$scope.pastYear, "MM/DD/YYYY")]
and
"During" + $scope.pastYear : [moment("01/01/"+$scope.pastYear, "MM/DD/YYYY"), moment("12/31/"+$scope.pastYear, "MM/DD/YYYY")]
Both the options throw an error. Is there a way to achieve this?
Related
I'm working with React RangePicker and I have to clear out the default values once user clicks on the calendar. I have tried to use onOpenChange and set the state to null or empty string but it converts all of my calendar dates to Invalid date. Below is the code of my RangePicker.
allowClear={false}
disabledDate={disabledDate}
onChange={(dates, dateString) => {
dates && dates[0]
? setFromDate(dates[0].format('DD-MM-YYYY'))
: setFromDate(null);
dates && dates[1]
? setToDate(dates[1].format('DD-MM-YYYY'))
: setToDate(null);
console.log(dates, dateString)
}}
onOpenChange={(dates, dateString) => {
setFromDate(moment(null))
setToDate(moment(null))
console.log(dates, dateString, dates[0], "ok")
}}
defaultValue={[
moment(fromDate, 'DD-MM-YYYY'),
moment(toDate, 'DD-MM-YYYY'),
]}
ranges={{
Today: [moment(), moment()],
Yesterday: [
moment().subtract(1, 'days'),
moment().subtract(1, 'days'),
],
'Last 7 Days': [moment().subtract(6, 'd'), moment()],
'This Month': [moment().startOf('month'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
}}
value={[
moment(fromDate,
// ? fromDate : null,
'DD-MM-YYYY'),
moment(toDate,
// ? toDate : null,
'DD-MM-YYYY'),
]}
/>
)}```
issue on Date Range Picker AngularJS using MVC on partial view
when we try to load my application, my textbox showing as [object Object] for daterange picker.why not showing daterange in textbox
$scope.date = {
startDate: moment().subtract(1, "days"),
endDate: moment()
};
$scope.SimplePickerChange = function(){
alert('hi');
$scope.date = {
endDate:$scope.date.startDate.add(30,"days")
}
alert(JSON.stringify($scope.date));
};
$scope.singleDate = moment().add(30, "days");
$scope.opts = {
locale: {
applyClass: 'btn-green',
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD",
toLabel: "To",
cancelLabel: 'Cancel',
customRangeLabel: 'Custom range'
},
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
}
};
$scope.setStartDate = function () {
$scope.date.startDate = moment().subtract(4, "days").toDate();
};
$scope.setRange = function () {
$scope.date = {
startDate: moment().subtract(5, "days"),
endDate: moment()
};
};
//Watch for date changes
$scope.$watch('date', function(newDate) {
console.log('New date set: ', newDate);
}, false);
I have a timestamp returned like this:
Fri Jun 30 2017 09:57:18 GMT+0100 (BST)
and I formatted it to look like this :
Jun 30, Fri 2017 09:57
When it is sorted in the Griddle it is sorted alphabetically
(apr,aug,dec,feb,jan,jul,jun,mar,may,nov,oct,sep) as it should but I really want to have them sorted according to months.
sortType: 'date' in metacolumns does not work.
return (<Griddle results={lRowData}
columns={this.columns()}
columnMetadata={this.columnMetadata()}
initialSort="date"
resultsPerPage={20}/>
);
},
columns() {
const lColumns = ['date'];
return lColumns;
},
columnMetadata() {
const lColumnMetadata = [{
columnName: 'date',
displayName: 'Date'
}];
return lColumnMetadata;
}
Is there a way to use some kind of indexed table like:
allMonths = ['Jan' , 'Feb', 'Mar', 'Apr', 'May',...., 'Dec'] where will be the one that helps on sorting them ?
For Griddle v0.x, check out customCompareFn (docs), e.g.
const allMonths = ['Jan', 'Feb', ...];
const lColumnMetadata = [{
columnName: 'date',
customCompareFn: date => allMonths.indexOf(date.substring(0, 3)),
displayName: 'Date'
}];
I am using Date Range Picker for Angular and Bootstrap and having settings same as below
$scope.opts = {
locale: {
applyClass: 'btn-green',
applyLabel: "Apply",
fromLabel: "From",
format: "D MMMM YYYY",
toLabel: "To",
cancelLabel: 'Cancel',
customRangeLabel: 'Custom range'
},
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 14 Days': [moment().subtract(13, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
},
opens: 'left',
eventHandlers: {
'apply.daterangepicker': function (ev, picker) {
}
}
};
While selecting any option from the defined ranges or custom range.
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 14 Days': [moment().subtract(13, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
},
I want to get range name like Last 7 Days, Last 14 Days or custom range
Is there any way to get this without calculating difference from selected dates?
I have the following HTML mark-up:
<select id="selectDays" class="form-control" ng-model="selectedDays"
ng-options="value.id as value.name for value in searchDays" ng-change="selectChange()">
</select>
searchDays is json array defined in $scope:
$scope.searchDays = [{ name: "30 Days", id: 30 }, { name: "60 Days", id: 60 }, { name: "90 Days", id: 90 }];
I want the third option to be selected i.e. 90 Days, I am using this code but it's not working:
//select 90 Days
$scope.selectedDays = $scope.searchDays[2];
am I missing something?
Specify the id property:
$scope.selectedDays = $scope.searchDays[2].id