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

JQuery daterangepicker Some function should be executed on some random dates

function addtoday(){
alert("Today");
}
function addyesterday(){
alert("Yesterday");
}
function lastweek1(){
alert("lastweek");
}
function last30days1(){
alert("last30days");
}
function presentmonth1(){
alert("this month");
}
function lastmonth1(){
alert("lastmonth");
}
function randomfunction(){
alert("randommmmmm");
}
$(function() {
var start = moment().subtract(29, '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,
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();
}
if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
if (picker.chosenLabel == "Last 7 Days") {
lastweek1();
}
if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
if (picker.chosenLabel == "This Month") {
presentmonth1();
}
if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
else if(setDate == "10/02/2018" && setDate == "10/20/2018") {
randomfunction();
}
});
<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" />
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
enter image description hereI am able to execute functions while i click on labels .Same way i should be able to execute functions while i click on a random date on my calendar
$(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") {
lastweek1();
}
else if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
else if (picker.chosenLabel == "This Month") {
presentmonth1();
}
else if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
else if(picker.startDate == "10/02/2018" && picker.endDate == "10/20/2018"){
randomfunction();
}
});
I am able to execute all functions but I am unable to execute randomfunction in my code,and can i store those dates in variables so that i can change it dynamically

You didn't convert the date your comparing from Epoch format.
EDIT: Also the endDate in your range is set to the end of that day, e.g a time of 23:59. I've amended it so that when you do the comparison it is set to the start of that day (00:00). That may not be what you want but it is simple to amend.
function addtoday(){
alert("Today");
}
function addyesterday(){
alert("Yesterday");
}
function lastweek1(){
alert("lastweek");
}
function last30days1(){
alert("last30days");
}
function presentmonth1(){
alert("this month");
}
function lastmonth1(){
alert("lastmonth");
}
function randomfunction(){
alert("randommmmmm");
}
$(function() {
var start = moment().subtract(29, '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,
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();
}
if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
if (picker.chosenLabel == "Last 7 Days") {
lastweek1();
}
if (picker.chosenLabel == "Last 30 Days") {
last30days1();
}
if (picker.chosenLabel == "This Month") {
presentmonth1();
}
if (picker.chosenLabel == "Last Month") {
lastmonth1();
}
if(picker.startDate == toEpochDate("10/02/2018") && toEpochDate(picker.endDate) == toEpochDate("10/20/2018")) {
randomfunction();
}
});
function toEpochDate(date){
var d = new Date(date);
d.setHours(0,0,0,0);
return d.getTime();
}
<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" />
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>

Dynamic Names in Kendo DateRangePicker

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()]
},

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