Make jquery datepicker perform same functions as a drop down select box date?

[mrdarienmark]

Basically, when selecting date via datepicker or the select box both should generate the same result. Help Jsfiddle http://jsfiddle.net/cLza3zm3/2/

[James_Hibbard]

Hi,

Could you elaborate on what you mean by “generate the same result”?
What is currently happening?
What would you like to be happening?

[mrdarienmark]

Sure. From my JsFiddle example (http://jsfiddle.net/cLza3zm3/2/) you see that if you select the date.month and year and click “Calculate sunrise/sunset” submit button the data changes below in the form.

What I would like to happen is; with the date picker (in red). A user can choose a date and the data will change the same way. I want to eliminate the select drop down function from the form.

[James_Hibbard]

You can probably use the datepicker’s onSelect event.

As you can read from the docs, this is called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

Something like this:

$("#datepicker").datepicker({
  onSelect: function(dateText) {
    calcSun(riseSetCalc, cityLatLong, cityLatLong.dayAns.selectedIndex, cityLatLong.cities.selectedIndex);
  }
});

[mrdarienmark]

Thanks. This works. But the data doesn’t change when I try to select another date. I’ve updated the script with the implemented javascript:

http://jsfiddle.net/cLza3zm3/3/

[James_Hibbard]

The function calcSun is calculating the sunrise/sunset based on whatever is set in the table between the datepicker and the “Calculate Sunrise/Sunset” button.

You need to make sure you are passing it the values from the datepicker instead.

You can get these from the aforementioned dateText variable.

$("#datepicker").datepicker({
  onSelect: function(dateText) {
    console.log(dateText);
  }
});

> 11/04/2014

[mrdarienmark]

So sorry. Can you walk me through this?

[James_Hibbard]

@mrdarienmark

So sorry. Can you walk me through this?

What parameters is the function calcSun expecting?

[mrdarienmark]

Parameters are below:

function calcSun(riseSetForm, latLongForm, index, index2)

riseSetForm : for displaying results
latLongForm : for reading latitude and longitude data
index : daylight saving yes/no select
index2 : city select index

I think ‘riseSetForm’ is which is what we’re looking for.

[James_Hibbard]

You need to work out where within the calcSun function the values are being extracted from the form you are passing in.
Then you can substitute these values for the ones from the datepicker.

The code is quite tightly coupled, though, so I don’t know how easy this will be in practice.

[mrdarienmark]

Yes, it is a very complex code and I think all we’re keeping is the sunset variable.

Using a very simple function. How would you pass a date that changes the variable in a form? Or do you know where I can read up about this.

[James_Hibbard]

I suppose one thing you could do is to insert the values from the date picker directly into the form, then it would be correctly prepared for when you call calcSun()

$( "#datepicker" ).datepicker({ 
  onSelect: function(dateText) {
    var monthNames = [ 
       "January", 
       "February", 
       "March",
       "April", 
       "May", 
       "June",
       "July", 
       "August", 
       "September", 
       "October", 
       "November", 
       "December"
     ],
    dateComponents = dateText.split("/"),
    day = dateComponents[1],
    month = monthNames[dateComponents[0]-1],
    year = dateComponents[2];
      
    $("form[name='riseSetCalc']").find("select").val(month);
    $("form[name='riseSetCalc']").find("input[name='day']").val(day);
    $("form[name='riseSetCalc']").find("input[name='year']").val(year);   
 
    calcSun(riseSetCalc, cityLatLong, cityLatLong.dayAns.selectedIndex, cityLatLong.cities.selectedIndex);
  }
});

It’s a messy solution, but as I don’t really fancy wading through 2,000 lines of code, it might be the best one.

Also, if you want to get rid of the form, you can hide it with CSS:

Here is a working demo.

---

Disclaimer: the code you provided looks dated. You are mixing in-line JavaScript with your HTML. This will be a maintainability nightmare in the long term. If this is an important application for you, I would look at getting someone to tidy it up a bit.

[mrdarienmark]

OH wow! This look perfect. I’ll test out tonight

[mrdarienmark]

I think this solution is awesome base on what we had to work with. I’ll do the rest with the cleaning up of the other coding as you suggested. THANKS MUCH!!

[James_Hibbard]

Glad to have helped.

Just to let you know, we now have a like button (the heart next to the reply button).

If any of these posts helped you, feel free to like them. The same goes for any other quality posts you see around the place.