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
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
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.
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
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?
yes it is populating the date but not correct ...
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();
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...
@████████- did that last solution work for your needs?
@████████- I'm curious if that solution worked for your needs. Please consider marking the response as the answer to your question if it did.