I have a Kendo daterangepicker defined like this:
$('#range').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
startDate: moment().subtract('days', 29),
endDate: moment()
},
function(start, end) {
$('#startDate').val(start.format('M/D/YYYY'));
$('#endDate').val(end.format('M/D/YYYY'));
refreshFileList();
}
).prev().on("click", function() {
$(this).next().focus();
});
How can I change "Today", "Yesterday", etc to be values read in from a variable rather than hard coded in the Javascript. For example:
var oneMonth = "One Month";
$('#range').daterangepicker(
{
ranges: {
oneMonth : [moment().subtract('month', 1), moment()],
threeMonths: [moment().subtract('month', 3), moment()],
sixMonths: [moment().subtract('month', 6), moment()],
allMonths: [moment().subtract('year', 15), moment()]
},
startDate: moment().subtract('month', 3),
endDate: moment()
},
function (start, end) {
$('#startDate').val(start.format('M/D/YYYY'));
$('#endDate').val(end.format('M/D/YYYY'));
refreshThumbnails();
}).prev().on("click", function () {
$(this).next().focus();
});
When I do like above, instead of displaying the value of oneMonth ("One Month"), it displays the variable name ("oneMonth") in the date range picker.
For dynamic property names based on a variable value, you will use bracket notation.
Create a data object prior to the range specification. Use object bracket notation to add a dynamic property name to the object. Use the object for the property of the ranges option.
oneMonthLabel = "One Month";
myranges = {};
myranges[oneMonthLabel] = [moment().subtract('month', 1), moment()];
$('#range').daterangepicker(
...
ranges: myRanges,
If you don't need to set the property based on a variable just use a quoted property name.
ranges: {
"One month" : [moment().subtract('month', 1), moment()],
"3 months": [moment().subtract('month', 3), moment()],
"6 months": [moment().subtract('month', 6), moment()],
"All months": [moment().subtract('year', 15), moment()]
},
Related
I have to use daterangepicker and I can't figure out how to fetch the selected date in jquery.
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
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')]
}
}, cb);
//fetch seleted date
var get_date = $('#reportrange').val()
console.log("reportrange selected date:", get_date)
You must retrieve the data object:
$('#reportrange').data('daterangepicker').startDate;
$('#reportrange').data('daterangepicker').endDate;
You can also use this
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) {
console.log("Your Select date range is: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
For more detail : https://www.daterangepicker.com/
You can use default callback function like this
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
},
function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + '
to ' + end.format('YYYY-MM-DD'));
});
});
$('#reportrange').data('daterangepicker').startDate;
$('#reportrange').data('daterangepicker').endDate;
My problem is I want to execute different functions on different dates. All my function execution depends on the dates which we select. For example, if I select last 7 days in my code it should execute a different function and if I select last one month it should execute another function. But when I click on apply I am able to execute only one function. I have tried lots of chunks of code but I could not find the answer. please help me out
$(function() {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
minDate: moment().subtract(365, 'days'),
maxDate:moment(),
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')],
},
},
cb)
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function() {
addtoday();
addyesterday();
presentmonth1();
last30days();
anydate();
});
</script>
If I want to write an if else for the moment() how should it be done. When I click on different date ranges I have to execute or trigger different functions
As you are using daterangepicker, the parameters of apply.daterangepicker event's second parameter has information regarding the chosen option based on which, you can call you desired function. See below:
$(function () {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
minDate: moment().subtract(365, 'days'),
maxDate: moment(),
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')],
},
},
cb)
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
if (picker.chosenLabel == "Today") {
addtoday();
}
else if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
else if (picker.chosenLabel == "Last 7 Days") {
}
else if (picker.chosenLabel == "Last 30 Days") {
last30days();
}
else if (picker.chosenLabel == "This Month") {
presentmonth1();
}
else if (picker.chosenLabel == "Last Month") {
}
else if (picker.chosenLabel == "Custom Range") {
}
});
I want to change date range picker's labels according to the language locale cookie which is set by user side. Right now, by default, I am using English labels, which I want to change them according to the cookie.
var locale = $.cookie('locale');
moment.locale(locale);
var start = moment();
var end = moment().add(29, 'days');
$('#Date').daterangepicker({
startDate: start,
endDate: end,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
},
ranges: {
'Today': [moment(), moment()],
'Tomorrow': [moment().add(1, 'days'), moment().add(1, 'days')],
'Next 7 Days': [moment(), moment().add(6, 'days')],
'Next 30 Days': [moment(), moment().add(29, 'days')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Next Month': [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')]
},
"alwaysShowCalendars": true
});
using moment.locale('custom language') helped to have the names of dates and month in localized language, but, how can I customize the labels of Today, Tomorrow and the others?
I want to get just the language id like 'en', 'fr' or others from cookie and then change the attributes in my javascript code according to that.
You should edit your locale object as below. Add "Apply" and "Cancel" on your cookie in desired language. Read from cookie and place them as I did below.
"locale": {
"format": "DD.MM.YYYY",
"separator": " - ",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"weekLabel": "W",
"daysOfWeek": [
I am using morris chart using http://morrisjs.github.io/morris.js/bars.html
one of the key problem i am facing is on add an option so that end user can filter data via data range or like say today or last one month etc.
That way the chart will be way more interactive and useful.
what would be the option to do that. i am using startBootStrap template which contains libraries for morris charts.
i used http://www.daterangepicker.com/#ex4 and linked it to my rest call to filter data
here is the brief code
function cb(start, end) {
$('#reportrange span').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));
//alert(start.format('MMM D, YYYY'));
$.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/msessionchart?onlyData=true&fields=Sessionlength,Sessiontime&limit=10',
type: 'get',
dataType: 'json',
success: function(output) {
console.log(output) ;
var ddata = JSON.stringify(output.items);
console.log('vik says');
console.log(ddata);
var arr = JSON.parse(ddata);
bar.setData(arr);
}
});
}
cb(moment().subtract(29, 'days'), moment());
$('#reportrange').daterangepicker({
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')]
}
}, cb);
I'm trying to use http://www.daterangepicker.com/ with angularjs but I cannot get the value of ngModel updated. I have written the following directive but can anyone please tell me why scope.ngModel is always undefined?
angular.module('daterangepickerDirective', [])
.directive('daterangepicker', function() {
return {
restrict: 'A',
scope: {
ngModel: '='
},
link: function( scope, element, attrs ) {
console.log('scope.ngModel') // UNDEFINED. Why?
// Date range picker
element.daterangepicker({
locale: {
format: 'YYYY-MM-DD',
showDropdowns: true
},
ranges: {
'All Time': ['1900-01-01', moment()],
'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')]
}
}).on("apply.daterangepicker",function(event){
scope.$apply(function() {
scope.ngModel.$setViewValue(event.date);//This will update the model property bound to your ng-model whenever the datepicker's date changes.
});
});
}
}
});
My HTML is simply
<input type="text" daterangepicker class="form-control" ng-model="selected_filters.date" />
Many thanks.