Отображать календарь в Jquery DatePicker, когда пользователь выбирает что-то из опции выбора, где значение из базы данных

Question

Привет, кто-нибудь может мне помочь с отображением календаря в JQuery, если пользователь нажимает на определенную опцию в раскрывающемся списке? Вот мой код

function OnChange(dropdown)
{
  var status = dropdown [dropdown.selectedIndex].text;
  status = dropdown[dropdown.selectedIndex].value;
  if (status == 01){
      $(function() {
         ("#datepicker").datepicker({ minDate: 0, maxDate: "+5M" });
        alert ("Success");
        });
  }
  return true;
}

Мой HTML

<tr>
         <td>
         <select id="schedule" onchange="OnChange(this.form.schedule);" >
     //I used jquery here to get the value of select option from database and works ok
     //There is corresponsing value on the options. If 01, the calendar will be shown, the rest..it will not be shown


      </select>
    </td>
</tr>

Я хочу отобразить календарь рядом с выпадающим списком, если выбрано 01. Проблема в jquery заключается в том, что ему нужен идентификатор, прежде чем календарь будет отображаться как #datepicker. Мне не нужно дополнительное текстовое поле или что-то еще, и после того, как дата выбрана ... она будет отображаться под полем выбора. Спасибо

Answer 1

//try this
$("#datepicker").datepicker({ minDate: 0, maxDate: "+5M" }).hide();
$("#schedule").bind("change",function(){
  if ($(this).val() == 01)
     $("#datepicker").show();
  else
     $("#datepicker").hide();
});

Answer 2

Вы имеете в виду это: http://jsfiddle.net/Hbpv7/2/

В настоящее время я добавляю временный указатель даты (встроенный) после выбора, когда вы выбираете значение 01. И если вы выбрали дату, средство выбора даты удаляется иотображается новая дата.

$(function(){
    $.ajax({
        url : "yoururl.php",
        success : function(result){
            $("select").append(result);
        }
    });
    $("select").change(function(){
        if($(this).find("option:selected").text() == "01")
        {
            showDatepicker.call(this);
        }   
        else
        {
             $("#tmpdatepicker").remove();   
        }
    });
});

function showDatepicker()
{
    // Don't  show more then 1
    if($("#tmpdatepicker").length) return;

    $(this).after("<div id='tmpdatepicker'></div>");
    var _tmp = $("#tmpdatepicker").datepicker({
        onSelect : function(dateText, inst){
             $(this).after("<div class='mydate'>" + dateText + "</div>").remove();
        }   
    });
}