I've placed a Bootstrap DateTime picker and a Hidden input field on a form. But when I debug the website the Razor binding @Model.Escalation.OutageStart for the DateTime picker's value it doesn't show.

Debugging findings:

  • I stepped through the code from the DAL to the controller through to the view, and it shows that my OutageStart DateTime field is populated as seen in the screenshot below:

enter image description here

  • The picker is also initialized in the script tag with the correct id selector.
  • If I set the hidden OutageStart field to visible the DateTime value is visible but not on the DateTime picker.
  • Inspecting the input element of the DateTime picker shows the DateTime value is there but it's not displaying in the rendered view:

enter image description here

  • Checking the console output shows no errors in the Browser's debugger console.


How can you resolve a DateTime value not displaying on DateTime picker?


@model dynamic

<div class="container body-content">

        <div class="form-group">


                <form id="editForm" action="" class="form-group has-feedback" method="post">
                    <div class="form-horizontal">
                        <div class="col-lg-12">

                                <!-- Outage Start Hidden Field -->
                                <div class="hidden">
                                    <input id="OutageStart" name="OutageStart" type="text" class="label-info" value="@Model.Escalation.OutageStart"><input>

                                <!-- Outage Start Display-->
                                <div class="form-group">
                                    <label class="col-md-9 control-label" style="text-align: left;" for="OutageStartDisplay">Outage Start (*UTC)</label>
                                    <div class="col-md-9">
                                        <div class='input-group date' id='OutageStartDisplay'>
                                            <input type='text' class="form-control" value="@Model.Escalation.OutageStart" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>


                </form>  <!--END OF FORM ^^-->


Script DateTime picker init:


    var outageStart;

    //Once the Document DOM is ready..
    $(document).ready(function () {

        //Init the Outage Start date time picker
        $(function () {

        //On change of the OutageStartDisplay datetime picker
        //update's the OutageStart hidden field with the datetime.
        $("#OutageStartDisplay").on("dp.change", function (e) {
            outageStart = moment(e.date);

    });//end $(document).ready


Related posts

Recent Viewed