I'm trying to display the date from the code behind in the bootstrap DateTimePicker
, but it won't display correctly.
This is my HTML/ASP Script:
<asp:TableCell>
<asp:Label ID="Label9" runat="server" Text="Label">DATE ISSUED:</asp:Label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<asp:TextBox ID="txt_DateIssued" runat="server"
CssClass="form-control" Width="374px">
</asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</asp:TableCell>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD' });
});
</script>
And here's my C# code:
txt_DateIssued.Text = "2016-03-13";
Output: Output - DateTimePicker
and when I clicked on the calendar icon, the year begins at 0003 :(
QUESTION: How can I display the date 2016-03-13
on the textbox?
I am assuming you are using this control Bootstrap Datepicker . In the future you should include the link to the library you have a question on (if your question is concerning a library).
Your JavaScript looks fine. Are you seeing any console errors in the browser? Are you using the latest version? Here is your code working in a Fiddle with the ASP.NET tags converted to standard HTML tags.
Minimal HTML fragment with script tags.
<div class='container'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' ID="txt_DateIssued" class="form-control" width="374px"></input>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
JavaScript
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD' });
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.