1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Rep Power

    Calendar in javascript


    How to add a link to the selected month and year?

    Ex-If I select Jun 2013, I want page1.html open.
    If I select Jul 2013, I want page2.html open.

    Please help.
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
        <script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker( {
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function(dateText, inst) { 
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                beforeShow : function(input, inst) {
                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
                        $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                        $(this).datepicker('setDate', new Date(year, month, 1));
        .ui-datepicker-calendar {
            display: none;
        <label for="startDate">Date :</label>
        <input name="startDate" id="startDate" class="date-picker" />
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Rep Power
    You would remove the onChange attribute from the select menu, that is displaying the months with .removeAttr() (or... at least append a new function, to the onChange event) and create your on function; that would redirect end user, to whatever page you want them to go to (notice how I said redirect, like with document.location.href - otherwise, if you try to open new window; from select menu..., you'll get a pop-up blocker; stopping that from happening). Once you create that function; you will need to add an onChange attribute or... append the current event, back to you month select menu (with your page redirect function, binded in your onChange event); with .attr(). I think the className of the month select menu is "ui-datepicker-month".

IMN logo majestic logo threadwatch logo seochat tools logo