DatePicker sur plusieurs mois

Version imprimable

Bonsoir,

Question idiote, très certainement de delegate, mais je ne vois pas comment

J'ai de datePicker, et je voudrais le 1er sur 3 mois et le second sur 2 mois

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Client.master"
    CodeBehind="Reservation.aspx.vb" Inherits="Guadeloup.Reservation" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
 
    <script src="/Scripts/InitDatePicker.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <div style="float: left;">
            <center>
                <strong class="TxtAppart">Tarifs</strong></center>
            <br />
            <center>
                <table>
                    <tr class="Ligne">
                        <td align="left">
                            Haute saison
                        </td>
                        <td>
                            du 01/01/2013
                        </td>
                        <td>
                            au 30/04/2013
                        </td>
                        <td>
                            1200€
                        </td>
                    </tr>
                    <tr class="LigneAlt">
                        <td align="left">
                            Moyenne saison
                        </td>
                        <td>
                            du 01/05/2013
                        </td>
                        <td>
                            au 30/09/2013
                        </td>
                        <td>
                            1000€
                        </td>
                    </tr>
                    <tr class="Ligne">
                        <td align="left">
                            Basse saison
                        </td>
                        <td>
                            du 01/10/2013
                        </td>
                        <td>
                            au 31/12/2013
                        </td>
                        <td>
                            900€
                        </td>
                    </tr>
                </table>
            </center>
            <asp:Label ID="lblTarif" runat="server" CssClass="TxtAppart"></asp:Label>
        </div>
    </div>
    <div style="float: right; width: 450px;">
        <center>
            <strong class="TxtAppart">Disponibilités</strong><br />
        </center>
        <br />
        <div>
            <div style="float: left;">
                <table>
                    <tr>
                        <td>
                            <asp:TextBox ID="txtEventStartDate" runat="server" CssClass="DatepickerInput" Width="80"></asp:TextBox>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEventEndtDate" runat="server" CssClass="DatepickerInput" Width="80"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="clear">
        </div>
        <br />
        <br />
 
    </div>
</asp:Content>

initdatepicker.js sert à me mettre mes date en fraçais

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
$(document).ready(function () {
    InitialisationDtePicker()
});
 
function InitialisationDtePicker() {
    $(".DatepickerInput").datepicker({ dateFormat: 'dd/mm/yy' });
 
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
		'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin',
		'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
        dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['fr']);
}

faudrait que je mette quelque part
$(function () { $("#txtEventStartDate").datepicker({ numberOfMonths: 3 }); });

mais là je tourne en rond, je ne voit pas ou, j'ai essayé plusieurs endroits mais sans succès

02/05/2013, 23h55
danielhagnoul

Voir le code de la démo : http://jqueryui.com/datepicker/#multiple-calendars
03/05/2013, 09h01
Pelote2012

:cry:
Je connais cette page, c'est d'ailleur de là que j'ai vu le paramètre numberofmonth, mais je n'ai pas regardé les autres option. :oops:
En regardant bien , en fait j'ai l'impression que mon fichier js ne sert à rien. :calim2:

Je vais voir ça

Si si mon fichier sert à mettre les dates en français :aie:

Voici la correction

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Client.master"
    CodeBehind="Reservation.aspx.vb" Inherits="Guadeloup.Reservation" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="/Scripts/InitDatePicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#from").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 3,
                dateFormat: "DD, d MM, yy",
                minDate : 0,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#to").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 2,
                dateFormat: "DD, d MM, yy",
                minDate: 0,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <div style="float: left;">
            <center>
                <strong class="TxtAppart">Tarifs</strong></center>
            <br />
            <center>
                <table>
                    <tr class="Ligne">
                        <td align="left">
                            Haute saison
                        </td>
                        <td>
                            du 01/01/2013
                        </td>
                        <td>
                            au 30/04/2013
                        </td>
                        <td>
                            1200€
                        </td>
                    </tr>
                    <tr class="LigneAlt">
                        <td align="left">
                            Moyenne saison
                        </td>
                        <td>
                            du 01/05/2013
                        </td>
                        <td>
                            au 30/09/2013
                        </td>
                        <td>
                            1000€
                        </td>
                    </tr>
                    <tr class="Ligne">
                        <td align="left">
                            Basse saison
                        </td>
                        <td>
                            du 01/10/2013
                        </td>
                        <td>
                            au 31/12/2013
                        </td>
                        <td>
                            900€
                        </td>
                    </tr>
                </table>
            </center>
            <asp:Label ID="lblTarif" runat="server" CssClass="TxtAppart"></asp:Label>
        </div>
    </div>
    <div style="float: right; width: 450px;">
        <center>
            <strong class="TxtAppart">Disponibilités</strong><br />
        </center>
        <br />
        <div>
            <div style="float: left;">
                <center>
                    <table>
                        <tr>
                            <td>
                                <input type="text" id="from" width="60" />
                            </td>
                            <td>
                                <input type="text" id="to" width="60" />
                            </td>
                        </tr>
                    </table>
                </center>
            </div>
        </div>
        <div class="clear">
        </div>
        <br />
        <br />
    </div>
</asp:Content>