Implement DateTimePicker using jQuery Plugin with Bootstrap in ASP.Net

Last Reply one month ago By pandeyism

Posted one month 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.

You are viewing reply posted by: pandeyism one month ago.
Posted one month 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