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

    Join Date
    Dec 2012
    Posts
    42
    Rep Power
    2

    Calendar in javascript


    Hello,

    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">
    <
    head>
        <
    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));
                    }
                }
            });
        });
        </script>
        <style>
        .ui-datepicker-calendar {
            display: none;
            }
        </style>
    </head>
    <body>
        <label for="startDate">Date :</label>
        <input name="startDate" id="startDate" class="date-picker" />
    </body>
    </html> 
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    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