Implement DateTimePicker using jQuery Plugin with Bootstrap in ASP.Net

Last Reply 3 months ago By pandeyism

Posted 3 months ago

Hi. Is there any way to implement jQuery DateTimePicker in Bootstrap? Without implementing Bootstrap, it works well but when bootstrap is implemented, the calendar doesn't show. Please advise.

Posted 3 months ago

Hi sat,

Refer below sample.

I have take below link to make this sample.

Implement DateTimePicker in ASP.Net using jQuery Plugin

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>
<div>
    <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server"></asp:TextBox>
    <img src="calender.png" />
</div>

Screenshot