JQuery Datepicker Get Selected Date

Question

I am currently working with 2 separate JQuery datepickers that I have modified the format to be able to pass through to store in a backend MySQL db.

<script>
$(function() {
$( ".datepicker" ).datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'yy-mm-dd',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],  
    });
});
</script>

---

My date pickers are called here

<input type="text" class='datepicker' name="datepicker1" />
<input type="text" class='datepicker' name="datepicker2" />

I have been trying to get the selected date to pass to php via ajax. I have tried using the getDate function but have not had much luck.

$(".datepicker").datepicker( 'getDate' );

Answer 1

Since you have two elements with the class .datepicker, the selector wont know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from.

first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

Demo : http://jsfiddle.net/hungerpain/TWmcD/

Note :

Won't val() be easier than using getDate? You could format your code date in mysql itself and save work for you in the clientside.

first = $(".datepicker[name=datepicker1]").val();
second = $(".datepicker[name=datepicker2]").val();

Answer 2

$(".datepicker").datepicker( 'getDate' ) will return only the date value from the first element of $(".datepicker") selector, in this case it might be datepicker1.

In order to get values of both these input fields you need to use

var dfs = $('.datepicker');
var f1 = dfs.filter('[name="datepicker1"]').datepicker( 'getDate' );
var f2 = dfs.filter('[name="datepicker2"]').datepicker( 'getDate' );

Demo: Fiddle