Call jquery datepicker from link and send the date through a post call

Question

Hi all,

I need to make the datepicker show when I click on a link and then send the selected date to a different page through a post call.

T tried to use this code for the link call:

$(".click-on-link").click(function(){
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        firstDay: 1
    });
});

and the html:

<a class="click-on-link" href="#">show datepicker</a>

but it's not working. Any idea?

Thanks!

Answer 1

I'd start off by first initialising your date picker when the page loads as follows:

$(document).ready(function() {
     // Date picker initialisation
     $("#datepicker").datepicker({
         showOn: 'button',
         buttonImage: 'images/button_cal.gif',
         buttonImageOnly: true,
         dateFormat: 'd MM yy',
         minDate: new Date(),
         onSelect: function(dateText, inst) {
                    // inst.selectedYear, selectedMonth and selectedDate hold the values you need. Use $.ajax() to send off to the server.
         }
     });

     // Show the date picker
         $(".class").click(function() {
         $("#datepicker").datepicker("show");
     });

});

Try the following sample, which lets you click on the text 'Date' which brings up the date picker for me. Perhaps we can work from this sample to get your scenario working:

<script type="text/javascript">
$(function() {
    $("#datepicker").datepicker({});

    $("#test").click(function(){
        $("#datepicker").datepicker('show');
    });
});
</script>

<p id="test">Date:</p> <input type="text" id="datepicker">

Answer 2

$(function() {
    $(".click-on-link").click(function() {
        $('#datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd/mm/yy',
            firstDay: 1,
            onSelect: function(dateText, inst) {
                alert(dateText) // make your AJAX call!
            }
        }).focus(); //make the datepicker appear!
    });
});