Calendar change URL on select with jQuery UI datepicker

Question

I am using jQuery UI picker and I am wondering if it's possible when someone pick a date, it automatically redirect them to the URL like so:

index.php?date=2013-10-15

Here's the plug-in I am using.

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

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

Well, I thought jQuery's UI is pretty common and everyone know what it is. :\ — John Guan, Oct 15 '13 at 06:32

score 14 · Accepted Answer · edited May 23 '17 at 11:59

1) What you need is window.location.href, which is the used to redirect the page. You can customize way the window to opened.

2) Once you select the date in datepicker (onSelect), you can combine the change event as @T.J. Crowder said in his answer.

You can try like this

$("#datepicker")
    .datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        $(this).change();
      }
    })
    .change(function() {
      window.location.href = "index.php?date=" + this.value;
    });

score 2 · Answer 2 · answered Oct 15 '13 at 06:36

2

Try this:

$(function () {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function () {
            window.open(document.URL + '?date=' + this.value);
        }
    });
});

Demo here

answered Oct 15 '13 at 06:36

Sergio

28,539
11
85
132

Very nice! But I opted for `window.location.href` since I am redirecting. – John Guan Oct 15 '13 at 06:44

score 0 · Answer 3 · answered Oct 15 '13 at 07:16

I hope this will work out as per your requirement.

Date:

<script>
$(function() {
$( "#datepicker" ).datepicker();

});

function myFunc(){
    var dateData = $("#datepicker").val();

    if(dateData != '' ){

        var url = "http://www.index.php?date="+ dateData ;
        window.open(url);

    }
}


</script>

<body>
<p>Date: <input type="text" id="datepicker" onchange="myFunc();" /></p>
</body>

Calendar change URL on select with jQuery UI datepicker

3 Answers3

Demo here

Linked