How to install bootstrap-datepicker as a component in MVC 5?

Question

Using this link and this one here plus the answer from here I was able to install the component as a "Text input" type. Now, I want to change it to a "Component" type but I don't know how to implement it correctly in MVC5 using the Razor engine.

<div class="input-append date">

$('#sandbox-container .input-append.date').datepicker({
todayBtn: "linked",
autoclose: true,
todayHighlight: true

});

This is what I have tried, but doesn't work: The glyph is displayed correctly. The calendar pops if the text box is clicked, but clicking the glyph doesn't do anything. If I remove the "#sandbox-container" from the script below, then the calendar pops when the glyph is clicked, however it is independent from the one in the text and selecting a date doesn't move it into the text input control.

    <div class="input-group">
        @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker "})
        <span class="input-group-addon input-append date  glyphicon glyphicon-th"></span>
    </div>

    $(function () {                      // will trigger when the document is ready
        $('#sandbox-container .input-append.date').datepicker({
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true
        });
    });

</script>

Answer 1

I had a similar problem with bootstrap-datetimepicker (based on bootstrap-datepicker). The component code doesn't seem to have been updated for compatibility with Bootstrap 3. It's kind of stupidly looking for a particular format for the addons (Bootstrap 2 style) instead of relying on specific classes on the "buttons". I fixed it by simply implementing my own component setup (basically bypassing the built in version).

HTML

<div class="input-group">
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new { type = "date", @class = "form-control" })
    <span class="input-group-btn">
        <button type="button" class="btn btn-default datetimepicker-reset">
            <i class="fa fa-times"></i>
        </button>
        <button type="button" class="btn btn-default datetimepicker-show">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</div>

That's a direct paste from my project, so let me explain a little. First, I have this in an EditorTemplate (which wouldn't be a bad idea for you to implement as well). The Html.TextBox bit is customized for that purpose. Passing the empty string for the name parameter lets Razor fill this with the right field name, and the ViewData.TemplateInfo.FormattedModelValue is how you get at the current value without specifying a model for the view. Also, I'm using font-awesome instead of the default glyphicons included in Bootstrap, so you can simply adjust the font classes accordingly. That code goes into Views\Shared\EditorTemplates\Date.cshtml. Then, you just need to specify the data type on your property, if you haven't already:

[DataType(DataType.Date)]
public DateTime MyDateProperty { get; set; }

Finally, all you need in your view to render all the HTML is:

@Html.EditorFor(m => m.MyDateProperty)

Then, you just need a little bit of extra JavaScript to wire everything up. I would suggest keeping this generic so you don't need to write the same code over and over for each instance of a date field. I just select all inputs of type "date":

$('input[type=date]').datetimepicker()
    .each(function () {
        var $input = $(this);
        var $parent = $input.parent();
        $parent.find('.datetimepicker-reset').on('click', function () {
            $input.val('');
            $input.datetimepicker('update');
        });
        $parent.find('.datetimepicker-show').on('click', function () {
            $input.datetimepicker('show');
        });
    });

Here, I'm just using the manual show method of bootstrap-datetimepicker. For the reset/clear button, you just set the value to empty and then tell bootstrap-datetimepicker to update so it recognizes this new value instead of still showing the old value selected in its control.