We Keep Coding

How can get date in daterangepicker ranges selected date

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;

JQuery start and end dates should execute different functions for different start and end dates

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") {
}
});

daterangepicker with moment js weekend is not clickable

I am using daterangepicker and moment JS for my date range. The problem here is that the weekends are not clickable. Did I miss a configuration somewhere?
JS Code:
$('#daterange-btn').daterangepicker(
{
ranges : {
'Today' : [moment(), moment()],
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This Week' : [moment().day(1), moment().day(5)],
'This Month' : [moment().startOf('month'), moment().endOf('month')]
},
startDate: moment(),
endDate : moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$("#chosen_range").val(start.format('MM/D/YYYY') + '-' + end.format('MM/D/YYYY'));
}
);

Added date filtering component to morris charts

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);

angularjs daterangepicker not populating ngmodel

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.