You are viewing limited content. For full access, please sign in.

Question

Question

changing date depend on some values

asked on December 11, 2016

Hi All,
 

i have a form like the below, How can the date 1 and date 2 automatically change depend on the drop down values

like if i select "First Quarter"  from the drop down values i want the date to change to 

date 1 : 1/1/2016

date 2 : 31/3/2016

 

 

0 0

Replies

replied on December 11, 2016

I can't promise this is the most efficient solution, but this should achieve what you are looking for.

This assumes that your dropdown has these choices and matching values:

 

It also assumes that your dropDown has a CSS Class of "dropDown", and your two date fields have CCS Classes of "startDate" and "endDate".

 

$(document).ready(function () {

  //function is called when the selected option in the dropdown is called.
  $('.dropDown').change( function () { 
    
    //get the selected value of the dropDown class which could be 1, 2, 3, or 4
    var qtr = $('.dropDown :selected').val();
    
    //calculate the first date of the quarter and populate into into the start date field.
    var d1 = new Date();
    var m1 = ((qtr * 3) - 3);
    d1.setMonth(m1);
    d1.setDate(1);
    var d1x = d1.getDate() + '/' + d1.getMonth()+1 + '/' + d1.getFullYear();
    $('.startDate input').val(d1x);
    
    //calculate the last date of the quarter and populate into into the end date field.
    var d2 = new Date();
    var m2 = ((qtr * 3));
    d2.setMonth(m2);
    d2.setDate(0);
    var d2x = d2.getDate() + '/' + d2.getMonth()+1 + '/' + d2.getFullYear();
    $('.endDate input').val(d2x);

  }) //end of $('.dropDown').change( function () { 
  
}); //end of $(document).ready(function () {

I haven't completely tested this code as-is, because I have dates formatted as mm/dd/yyyy, but this code (as you requested it) has the dates formatted as dd/mm/yyyy.  But when I had the values re-arranged it worked for me.

0 0
replied on December 11, 2016

Hi 
thanks for your reply .... i tried it but it's not working even after changing date format ... i am thinking about to make the values fixed

 

0 0
replied on December 12, 2016

The code for doing fixed dates is definitely easier, but would require you to change it each year.  I'm happy to help write it, but I don't recommend it as the best solution.

When you say it's not working - how is it not working?  Is it not populating anything into the date fields, is it populating incorrect values?

0 0
replied on December 13, 2016

yes it is populating the date but not correct ...

 

 

0 0
replied on December 13, 2016 Show version history

Oh, that should be a very easy fix.

The problem should be in lines 14 and 22 that I gave you before:

var d1x = d1.getDate() + '/' + d1.getMonth()+1 + '/' + d1.getFullYear();
var d2x = d2.getDate() + '/' + d2.getMonth()+1 + '/' + d2.getFullYear();

The functions getDate() gives us the day of the month (1-31), getMonth()+1 gives us numerical month of the year (between 1 and 12 - we have to add the 1 because Javascript usually uses 0-11 for the month), and the getFullYear gives us 4-digit year (i.e. 2016).

These two lines of code are just taking those three values and putting a / symbol between them.  Based on your original question, I posted the code assuming that your computer is formatting dates as Day / Month / Year (d/m/yyyy) - so third quarter would return 1/7/2016 and 30/9/2016.

If that is not how your computer displays dates, we would need to tweak those two lines of code.  For example, my computer displays dates as m/d/yyyy (7/1/2016 and 9/30/2016 for third quarter).  So on my computer I have to change the two lines of code to look like this:

var d1x = d1.getMonth()+1 + '/' + d1.getDate() + '/' + d1.getFullYear();
var d2x = d2.getMonth()+1 + '/' + d2.getDate() + '/' + d2.getFullYear();
0 0
replied on December 13, 2016 Show version history

I'm very sorry @████████ that we were not able to get the flexible code working.  I know it has to be something with date formats, because I get the same erroneous results when I reverse dates and months in my system.

If you are sure you want to go the route of hard coded dates, this code should get you started:

$(document).ready(function () {

  //function is called when the selected option in the dropdown is called.
  $('.dropDown').change( function () { 
    
    //get the selected value of the dropDown class which could be 1, 2, 3, or 4
    var qtr = $('.dropDown :selected').val();
    
    //determine the date values for the selected quarter.
    if (qtr == 1) {
      var d1 = '1/1/2016'; 
      var d2 = '31/3/2016'; 
    }
    else if (qtr == 2) { 
      var d1 = '1/4/2016'; 
      var d2 = '30/6/2016'; 
    }
    else if (qtr == 3) {
      var d1 = '1/7/2016'; 
      var d2 = '30/9/2016'; 
    }
    else if (qtr == 4) {
      var d1 = '1/10/2016'; 
      var d2 = '31/12/2016'; 
    } //end of if (qtr == 1)...else if...statement

    //populate the date values into the fields
    $('.startDate input').val(d1);
    $('.endDate input').val(d2);

  }) //end of $('.dropDown').change( function () { 
  
}); //end of $(document).ready(function () {

To prevent having to update the hard coding as often, instead of just having the four quarter options in your dropdown you could add more:

Text: 1st Quarter, 2016 - Value: 1
Text: 2nd Quarter, 2016 - Value: 2
Text: 3rd Quarter, 2016 - Value: 3
Text: 4th Quarter, 2016 - Value: 4
Text: 1st Quarter, 2017 - Value: 5
Text: 2nd Quarter, 2017 - Value: 6
etc., etc.

And then expand the if else... options in the Javascript to address the additional values...

0 0
replied on December 13, 2016

To prevent having to update the hard coding as often, instead of just having the four quarter options in your dropdown you could add more:

Text: 1st Quarter, 2016 - Value: 1
Text: 2nd Quarter, 2016 - Value: 2
Text: 3rd Quarter, 2016 - Value: 3
Text: 4th Quarter, 2016 - Value: 4
Text: 1st Quarter, 2017 - Value: 5
Text: 2nd Quarter, 2017 - Value: 6
etc., etc.

And then expand the if else... options in the Javascript to address the additional values...

replied on December 15, 2016

@████████- did that last solution work for your needs?

0 0
replied on January 5, 2017

@████████- I'm curious if that solution worked for your needs.  Please consider marking the response as the answer to your question if it did.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.