Styjun

What did Turing mean when saying that "machines cannot give rise to surprises" is due to a fallacy?

Is a copyright notice with a non-existent name be invalid?

Is the time—manner—place ordering of adverbials an oversimplification?

How to ask rejected full-time candidates to apply to teach individual courses?

Are there any irrational/transcendental numbers for which the distribution of decimal digits is not uniform?

.bashrc alias for a command with fixed second parameter

Where and when has Thucydides been studied?

Determine whether an integer is a palindrome

One-one communication

Short story about astronauts fertilizing soil with their own bodies

How to achieve cat-like agility?

Did any compiler fully use 80-bit floating point?

How do Java 8 default methods hеlp with lambdas?

What is the proper term for etching or digging of wall to hide conduit of cables

Sally's older brother

How could a hydrazine and N2O4 cloud (or it's reactants) show up in weather radar?

Is there any significance to the prison numbers of the Beagle Boys starting with 176-?

Vertical ranges of Column Plots in 12

Should man-made satellites feature an intelligent inverted "cow catcher"?

Is there a verb for listening stealthily?

The test team as an enemy of development? And how can this be avoided?

New Order #6: Easter Egg

Why are current probes so expensive?

Noise in Eigenvalues plot

Calculate duration and display in daterangepicker Calendar

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I am trying to calculate duration between selected days on the calender which is calculating fine but when I click apply button instead of when select end date.

I am using calender from: http://www.daterangepicker.com

$(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');

//Calculation of Duration:
var date1 = new Date(start.format('YYYY-MM-DD'));
var date2 = new Date(end.format('YYYY-MM-DD'));
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
$('.duration_days').html(diffDays+' Days');
 //console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 );
);

Duration calculating when I press apply button but I want it to be calculate when end date is selected. Please check attached screenshots:
Screen Shot
Screen Shot 2

javascript jquery datepicker daterangepicker

share|improve this question

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  enable "autoApply": true and then use apply.daterangepicker event
  
  – Shree Tiwari
  Mar 22 at 13:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just added autoApply: true, after opens: 'left', but not sure how to use apply.daterangepicker and where. can you please help ?
  
  – Mubashar Ahmad
  Mar 22 at 13:12
  

  
  
  
  

add a comment | 

1

I am trying to calculate duration between selected days on the calender which is calculating fine but when I click apply button instead of when select end date.

I am using calender from: http://www.daterangepicker.com

$(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');

//Calculation of Duration:
var date1 = new Date(start.format('YYYY-MM-DD'));
var date2 = new Date(end.format('YYYY-MM-DD'));
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
$('.duration_days').html(diffDays+' Days');
 //console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 );
);

Duration calculating when I press apply button but I want it to be calculate when end date is selected. Please check attached screenshots:
Screen Shot
Screen Shot 2

javascript jquery datepicker daterangepicker

share|improve this question

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  enable "autoApply": true and then use apply.daterangepicker event
  
  – Shree Tiwari
  Mar 22 at 13:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just added autoApply: true, after opens: 'left', but not sure how to use apply.daterangepicker and where. can you please help ?
  
  – Mubashar Ahmad
  Mar 22 at 13:12
  

  
  
  
  

add a comment | 

I am trying to calculate duration between selected days on the calender which is calculating fine but when I click apply button instead of when select end date.

I am using calender from: http://www.daterangepicker.com

$(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');

//Calculation of Duration:
var date1 = new Date(start.format('YYYY-MM-DD'));
var date2 = new Date(end.format('YYYY-MM-DD'));
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
$('.duration_days').html(diffDays+' Days');
 //console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 );
);

Duration calculating when I press apply button but I want it to be calculate when end date is selected. Please check attached screenshots:
Screen Shot
Screen Shot 2

javascript jquery datepicker daterangepicker

share|improve this question

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

$(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');

//Calculation of Duration:
var date1 = new Date(start.format('YYYY-MM-DD'));
var date2 = new Date(end.format('YYYY-MM-DD'));
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
$('.duration_days').html(diffDays+' Days');
 //console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 );
);

share|improve this question

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

share|improve this question

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

edited Mar 24 at 8:46

Flyii

463113

edited Mar 24 at 8:46

Flyii

463113

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

asked Mar 22 at 12:52

Mubashar AhmadMubashar Ahmad

63

1 Answer
1

active

oldest

votes

0

As Shree Tiwari has explained in the comments you can use the apply.daterangepicker event.

apply.daterangepicker: Triggered when the apply button is clicked, or
when a predefined range is clicked

So your final js code is like this:

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

share|improve this answer

edited Mar 22 at 15:45

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still not working for me.
  
  – Mubashar Ahmad
  Mar 22 at 13:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you please tell where to add the above code ? inside the datepicker code or outside in a new function ?
  
  – Mubashar Ahmad
  Mar 22 at 13:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I editted, does it work like this?
  
  – Wimanicesir
  Mar 22 at 14:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No it is still not working even not calculating duration if I click apply button
  
  – Mubashar Ahmad
  Mar 22 at 15:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah i forgot the add it to duration days. Does it work now?
  
  – Wimanicesir
  Mar 22 at 15:45
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55300050%2fcalculate-duration-and-display-in-daterangepicker-calendar%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

As Shree Tiwari has explained in the comments you can use the apply.daterangepicker event.

apply.daterangepicker: Triggered when the apply button is clicked, or
when a predefined range is clicked

So your final js code is like this:

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

share|improve this answer

edited Mar 22 at 15:45

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still not working for me.
  
  – Mubashar Ahmad
  Mar 22 at 13:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you please tell where to add the above code ? inside the datepicker code or outside in a new function ?
  
  – Mubashar Ahmad
  Mar 22 at 13:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I editted, does it work like this?
  
  – Wimanicesir
  Mar 22 at 14:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No it is still not working even not calculating duration if I click apply button
  
  – Mubashar Ahmad
  Mar 22 at 15:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah i forgot the add it to duration days. Does it work now?
  
  – Wimanicesir
  Mar 22 at 15:45
  

  
  
  
  

add a comment | 

0

As Shree Tiwari has explained in the comments you can use the apply.daterangepicker event.

apply.daterangepicker: Triggered when the apply button is clicked, or
when a predefined range is clicked

So your final js code is like this:

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

share|improve this answer

edited Mar 22 at 15:45

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  still not working for me.
  
  – Mubashar Ahmad
  Mar 22 at 13:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you please tell where to add the above code ? inside the datepicker code or outside in a new function ?
  
  – Mubashar Ahmad
  Mar 22 at 13:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I editted, does it work like this?
  
  – Wimanicesir
  Mar 22 at 14:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No it is still not working even not calculating duration if I click apply button
  
  – Mubashar Ahmad
  Mar 22 at 15:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah i forgot the add it to duration days. Does it work now?
  
  – Wimanicesir
  Mar 22 at 15:45
  

  
  
  
  

add a comment | 

As Shree Tiwari has explained in the comments you can use the apply.daterangepicker event.

apply.daterangepicker: Triggered when the apply button is clicked, or
when a predefined range is clicked

So your final js code is like this:

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

share|improve this answer

edited Mar 22 at 15:45

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

 
 $(function() 
 $('input[name="daterange"]').daterangepicker(
 opens: 'left',
 , function(start, end, label) 
 document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
 document.getElementById('return_date').value = end.format('YYYY-MM-DD');
 );
 $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) 
 var date1 = new Date(start.format('YYYY-MM-DD'));
 var date2 = new Date(end.format('YYYY-MM-DD'));
 var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
 $('.duration_days').html(diffDays+' Days');
 );
);

share|improve this answer

edited Mar 22 at 15:45

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212

answered Mar 22 at 13:14

WimanicesirWimanicesir

668212