ASP.net C# bootstrap datetimepicker assign value

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?

Answers


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' });
});

Need Your Help

Pass PartialView with AJAX and still using Controller in MVC on submit

javascript jquery html ajax asp.net-mvc

I have a div where I want to put a PartialView when I press a input of type submit. The partialview must be created inside the div after the Controlleraction ShowDetail() has executed else I'm gett...

Keyboard focus to DataGrid

c# wpf datagrid keyboard focus

I have a WPF DataGrid and want to set the focus to the first item so that the user can navigate with the keyboard in the list of items, when the dialogue is opened the first time. With datagrid.Foc...