Thursday 20 June 2013

On button click open Jquery calendar

Generally if you find Jquery calendar it will open while you focus the input textbox.

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

So, here is my solution ..while you click on button or link..jquery calendar will open.


Html is
  
    One Time

Style tag
 .ui-datepicker
        {
            top: 29.5px !important;
        }

Script tag
 var textBox = $('#mdatepicker');
        var icon = $('#btnOneTime');
        var mydatepicker = textBox.datepicker
            ({
                minDate: 0, /*Here user can only select future n current date*/
                onSelect: function (selectedDate) {
                    $('#hdnSchdule').val(selectedDate);
                    $('#hdnSchduleType').val(1);
                    $('.button_part a').removeClass("button2").removeClass("button2_active");
                    $('.button_part a').addClass("button2");
                    $('#btnOneTime').addClass("button2_active");
                    // alert(selectedDate);
                    // alert($('#hdnSchdule').val());
                }
            });

        icon.click(function () {
            mydatepicker.datepicker("show");
        });

No comments:

Post a Comment