11499 sujets

JavaScript, DOM et API Web HTML5

JQuery UI Datepicker avec asp.net mvc 3

Bonjour,
Je développe une application web en asp.net mvc3. Je souhaite utiliser le calendrier datepicker pour la saisie de date dans un formulaire. J'ai parcouru le web et suivi les divers tutoriels sur l'intégration de cette fonctionnalité mais lorsque je clique sur la zone de saisie, le calendrier n’apparaît pas. Il y a forcément quelque chose que je fais mal mais je n'arrive pas à trouver quoi.

Voici mon code :

Les fichiers js et css sont intégrés à la master page ; 

%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
    <link href="<%: Url.Content("/Content/themes/perinfo_theme/jquery-ui-1.10.3.custom.min.css") %>" rel="stylesheet"
        type="text/css" />
    <link href="<%: Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.9.1.min.js") %>" type="text/javascript"></script>
    <!--Script nécéssaire à l'utilisation d'Ajax-->
    <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>
    <!--Script avec fonctions JQuery-->
    <script src="<%: Url.Content("~/Scripts/main.js") %>" type="text/javascript"></script>
    <!--Script pour utiliser les fonctions JQueryUI personnalisées-->
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.10.3.perinfo.js") %>" type="text/javascript"></script>
</head>


Les zones de saisies dans ma vue:

<fieldset class="left">
                <legend>Dates de réception</legend>
                <table id="tabRechercheReception">
                    <tr>
                        <td>
                            <div class="editor-label">
                                <%: Html.LabelFor(model => model.DateCreationDebut)%>
                            </div>
                            <div class="editor-field">
                                <%: Html.TextBoxFor(model => model.DateCreationDebut, new { @class = "datefield" })%><br />
                                <%: Html.ValidationMessageFor(model => model.DateCreationDebut)%>
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                <%: Html.LabelFor(model => model.DateCreationFin)%>
                            </div>
                            <div class="editor-field">
                                <%: Html.TextBoxFor(model => model.DateCreationFin, new { @class = "datefield" })%><br />
                                <%: Html.ValidationMessageFor(model => model.DateCreationFin)%>
                            </div>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </fieldset>


et la fonction jQuery dans un fichier main.js

$(document).ready(function () {
    //Afficher/Masquer un élément
    $('#divFormCriteres').hide();
    $('#showhide').click(function () {
        $("#divFormCriteres").toggle(400);
    //Calendrier
    $('.datefield').datepicker();
    });
});


Merci par avance pour vos réponses.
Sujet clos
Aller à