CODEWITHSUNDEEP
c#asp.net
Mikkel
Mikkel

Reputation: 1811

Datetimepicker does only work with Input field, not Asp:TextBox

My bootstrap datetimepicker does only work with the input tag like this:

<input type="text" class="form-control" id="datetimepicker1" />
<input type="text" class="form-control" id="datetimepicker2" />

Is it possible to convert it to the asp:TextBox, because i need to use the control when operating with the database. Right now i got:

                    <div class="form-group">
                    <asp:Label ID="CheckinLabel" runat="server" Text="Check- in Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker1" runat="server" CSSclass="form-control"></asp:TextBox>
                    </div>
                    <div class="form-group">
                    <asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker2" runat="server" CSSclass="form-control"></asp:TextBox>
                    </div>

Script:

$(function () {
                $("#datetimepicker1").datetimepicker({
                    format: 'DD/MM/YYYY',

                });
                $("#datetimepicker2").datetimepicker({
                    format: 'DD/MM/YYYY',

                });
                $("#datetimepicker1").on("dp.change", function (e) {
                    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                });
                $("#datetimepicker2").on("dp.change", function (e) {
                    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                });
            });
        </script>

I'm asking this because when using the input and put the runat="server" on , i get errors because of the controlId.

Upvotes: 0

Views: 206

Answers (2)

walther
walther

Reputation: 13600

Use ClientIDMode="Static" as an attribute or in web.config. That will keep your IDs from changing.

You have 3 options:

1.) control attribute
2.) page level setting
3.) attribute on pages element in web.config

Upvotes: 1

Stephen Brickner
Stephen Brickner

Reputation: 2602

You could also target it with it's own css class name.

<asp:TextBox ID="CheckoutLabel" runat="server" Text="Check-out Date" CssClass="myClassName"></asp:TextBox>

$(".myClassName").datetimepicker({ format: 'DD/MM/YYYY',

            });

Upvotes: 0

Related Questions