Datepicker bootstrap ne fonctionne plus dans les cellules d'une table d'une vue partielle

Bonjour,

J'ai un problème avec bootstrap datepicker.
Je le fais fonctionner partout, sauf à l'endroit où j'en ai besoin : dans une vue partielle

La vue partielle comporte une table, et dans chaque ligne de la table 2 cellules ont un datepicker.

Si j'utilise :

Code:

1
2
 
@await Html.PartialAsync("_TablePartial")

pour appeler la vue partielle, tout fonctionne bien.
Et partout ailleurs.
J'ai testé sur un projet de test.

Sauf que je dois appeler la vue via une fonction ajax.
Et là, les menus déroulants de datepicker ne fonctionne plus.

Le datepicker n'y est probablement pour rien.

Code:

1
2
 
    <link href="~/lib/bootstrap_datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />

Code:

1
2
3
 
    <script src="~/lib/bootstrap_datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="~/lib/bootstrap_datepicker/js/bootstrap-datepicker.fr.min.js"></script>

puis, dans ma vue principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <script>
        $('.DatePick').datepicker({
            todayBtn: true,
            clearBtn: true,
            language: "fr",
            multidateSeparator: "/",
            todayHighlight: true,
            autoclose: true,
            startDate: "0d",
            todayBtn: "linked",
        }
        );
</script>

L'appel dans la vue principale :

Code:

1
2
3
 
    <div id="VendeurPartialView" >
    </div>

puis ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
        var MainPartial = document.getElementById('VendeurPartialView');
 
        function LoadDetailPartialView(MenuName) {
            if (typeof MenuName == 'undefined') MenuName = 'ListArticles';
            $.ajax({
                url: '@Url.Action("ChangeVendeurPartial", "Articles")',
                type: 'GET',
                cache: false,
                data: { Menu: MenuName }
            }).done(function (result) {
                if (result.redirectTo)
                $(MainPartial).html(result);
            });
        };

Voici la vue partielle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
    // ---------- S T A T U T ---------------
    var Check_Soldes = function (PrixSolde, id) {
        var IconSolde = "btnsolde_" + id;
        var DATED = "date_deb_" + id;
        var DATEF = "date_fin_" + id;
        var myBool = (PrixSolde === '');
        var Icon = document.getElementById(IconSolde);
        var DateDeb = document.getElementById(DATED);
        var DateFin = document.getElementById(DATEF);

        if (myBool == true) {
            //CouleurStatut.style = "color:green;font-weight:600;font-size: 12px;";

            Icon.style = "margin-left: 5px; cursor: pointer;color:lightgray;font-size: 20px;"
            Icon.classList = "fa-solid fa-check";
            Icon.title = "Appliquer les soldes";
          }
        else {
            Icon.style = "margin-left: 5px; margin-right: 3px; cursor: pointer;color:green;font-size: 40px;"
            Icon.classList = "fa-solid fa-square-check";
            Icon.title = "Supprimer les soldes";
         }
    };
</script>


<table class="mesarticles_table">
    <thead>
        <tr style="background-color:#f2f2f2; border:1px solid;border-color:gray;">
            <th class="titre-table" style="min-width:100px;">Image</th>
            <th class="titre-table" style="min-width:100px;">Nom</th>
            <th class="titre-table" style="min-width:200px;">Référence</th>
            <th class="titre-table" style="min-width:200px;">Votre Réf.</th>
        </tr>
    </thead>
    <tr>
        <td class="ligne-table">
        </td>
        <td class="ligne-table">
        </td>
        <td class="ligne-table">
            <div>
                <input type="text" id="date" placeholder="Choisissez une date" style="cursor: pointer;" class="DatePick">
            </div>
        </td>
        <td class="ligne-table">
            <div>
                <input type="text" id="date" placeholder="Choisissez une date" style="cursor: pointer;" class="DatePick">
            </div>
        </td>
    </tr>
</table>

Les seules différences entre le projet test (bon fonctionnement) et mon projet principal (mauvais fonctionnement) sont :
- Un script au début.
- La vue partielle est appelée via ajax

Merci pour votre aide