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.

Question:

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

Code:

@model dynamic

<div class="container body-content">


        <div class="form-group">

            <fieldset>

                <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>
                                </div>


                                <!-- 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>
                                            </span>
                                        </div>
                                    </div>
                                </div>



                        </div>


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


            </fieldset>
        </div>
    </div>

Script DateTime picker init:

<script>



    var outageStart;

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


        //Init the Outage Start date time picker
        $(function () {
            $('#OutageStartDisplay').datetimepicker({
            });
        });


        //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);
            $('#OutageStart').val(moment(e.date).format());
        });



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



</script>

Related posts

Recent Viewed