Как использовать jquery Datepicker в веб-контроле в asp.net?

я создаю веб-элемент управления и хочу использовать средство выбора даты jquery для этого элемента управления, я пробовал следующие вещи: 1). примените весь необходимый код jquery в веб-контроле (но у меня это не работает.) 2). примените весь необходимый код jquery на странице, где я вызываю этот веб-элемент управления (но у меня это не работает.)

Пожалуйста помогите,

На самом деле, какова моя цель сделать это: я хочу создать общий модуль для поиска, которому я просто передам имя таблицы, это будет работать автоматически, что я завершил до сих пор:

1). свяжите все столбцы в раскрывающемся списке, теперь я хочу сделать следующее: если тип столбца - DateTime, тогда он покажет текстовое поле с календарем jquery.

Пожалуйста, помогите мне решить эту проблему, мой код:

<table>
<tr>
    <td>
        <asp:DropDownList ID="drpColumnName" Width="150px" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="drpColumnName_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpOperation" Width="150px" runat="server">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpCondition" Width="150px" runat="server">
            <asp:ListItem Text="Or" Selected="True" Value="0"></asp:ListItem>
            <asp:ListItem Text="And" Value="1"></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:TextBox ID="txtSearchText" runat="server" Width="150px"></asp:TextBox>
        <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>
    </td>
    <td>
        <asp:Button ID="btnAddConditionToSearch" runat="server" Text="AddToSearch" OnClick="btnAddConditionToSearch_Click" />
    </td>
</tr>
<tr>
    <td colspan="5">
        &nbsp;
    </td>
</tr>
</table>

Код страницы:

  <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <Search:ctrlSearch ID="cntrlSearch" runat="server" />
</div>
</form>

Код Jquery:

     <script type="text/javascript">
$(document).ready(function () {


    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    // Place here the first init of the DatePicker   

    $('.myclass').datepicker();


});

function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
    // after update occur on UpdatePanel re-init the DatePicker 

    $('.myclass').datepicker();


}

Please help me,


datepicker jquery asp.net web-controls
person Ram Singh    schedule 05.03.2013    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Найдите средство выбора даты с помощью селектора класса. Это намного проще, чем пытаться найти идентификаторы. Если ваши элементы управления зажаты на панели обновления, у вас есть два инициализатора средства выбора даты дважды.

  <script type="text/javascript">
  $(document).ready(function () {


        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        // Place here the first init of the DatePicker   

        $('.myclass').datepicker();


    });

    function InitializeRequest(sender, args) { }
    function EndRequest(sender, args) {
        // after update occur on UpdatePanel re-init the DatePicker 

        $('.myclass').datepicker();


             }
</script>

Разметка`

  <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>

См. демонстрационные файлы здесь

person Abide Masaraure    schedule 05.03.2013
comment
Где находятся ваши сценарии запросов. Они должны быть на главной странице. И укажите, используете ли вы панели обновлений. - person Abide Masaraure; 05.03.2013
comment
я обновил код, теперь я могу просматривать div в html, отображаемый с помощью firebug, но все еще не могу отображать средство выбора даты - person Ram Singh; 05.03.2013
comment
Не могли бы вы показать мне файлы js, которые вы используете. Поместите этот код на главную страницу aspx. - person Abide Masaraure; 05.03.2013
comment
Я обновил свой ответ с помощью папки с демонстрационными файлами. Я не понимаю, почему это не должно работать. - person Abide Masaraure; 05.03.2013

arrow_upward
1
arrow_downward

Проверьте так

$("#<%=txtSearchText.ClientID%>").datepicker();
person Dinesh Haraveer    schedule 05.03.2013

arrow_upward
0
arrow_downward

Я думаю, что ваша проблема будет заключаться в том, что asp.net изменяет имена и идентификаторы элементов, которые вложены в элементы управления и главные страницы и т. д.

Откройте исходный код своей страницы, найдите элемент управления и дважды проверьте идентификатор.

Или в качестве альтернативы добавьте к элементу класс css и найдите его вместо идентификатора с помощью jQuery.

JA

person Jim    schedule 05.03.2013

arrow_upward
0
arrow_downward

посетите эту страницу jquery-ui-datepicker -> Это код пользовательского интерфейса. Сохраните этот блок кода как файл js. затем введите его на своей странице aspx.

<script src="js/jquery.ui.datepicker-tr.js" type="text/javascript"></script> like this.

$(document).ready(function () {

$('#<%=txtBirthday.ClientID%>').datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:-17",
                defaultDate: new Date(1980, 01, 01)
            });

});

и вот пример кода.

person Batuhan Karaduman    schedule 11.07.2013