单击日历时不显示日期选择器答案

【问题标题】：Date Picker Not Displayed When Clicking On Calendar单击日历时不显示日期选择器
【发布时间】：2014-12-25 07:28:39
【问题描述】：

我的输入字段是日期选择器，目前，当您单击该字段时可以正常工作。但有人问我，当用户点击日历时，日历也应该显示，但这是我无法开始工作的地方。

我正在使用文本框扩展，我的代码是：

public static MvcHtmlString CalandarTextBox(this HtmlHelper htmlHelper, string prefix, string name, object value, object htmlAttributes)
    {

        TagBuilder tagBuilder = new TagBuilder("input");
        tagBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        string template = "";
        template += "<div class=\"input-group input-group-IE7\">";
        template += "   <input class=\"form-control\" type=\"text\" name=\"{0}\" id=\"{0}\" value=\"{1}\" {2}";
        template += "   <div class=\"input-group-addon input-group-addon-IE7\"><i class=\"{3}\"></i></div>";
        template += "</div>";
        MvcHtmlString TextBox = new MvcHtmlString(
            String.Format(template, name, value, tagBuilder.ToString(TagRenderMode.Normal).Replace("<input ", " "), prefix)
            );

        return TextBox;
    }

我认为这些字段的代码是：

template.Nvc.Add("[!FromDate]",  Html.CalandarTextBox("glyphicon glyphicon-calendar", "FromDate", fromDateValue, new { @class = "form-control" }).ToHtmlString());

最后，我对该领域的 Javascript 是：

    $("#FromDate").click(function () {
        $("#Months").val(0);
    });

    $("#FromDate").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true
    });

正如我上面所说，当我点击输入字段时显示日历，但如果我点击输入字段末尾的日历则不显示。

我该怎么做。

【问题讨论】：

从我的脑海中浮现：您将日历绑定到输入框。使用开发工具尝试查看“日历”是否有一个可以用来绑定点击的类。
只需向我们展示您尝试定位的数据选择器输入的渲染内容。

标签： c# jquery twitter-bootstrap-3 asp.net-mvc-5

【解决方案1】：

修复

$("#FromDate").datepicker({
                        showOn: "button",
                        changeMonth: true,
                        changeYear: true,
                        buttonImage: "../../images/calendar.png",
                        buttonImageOnly: true,
                        buttonText: "Select date",
                        dateFormat: "dd/mm/yy"
                    });

$("#ToDate").datepicker({
                    showOn: "button",
                    changeMonth: true,
                    changeYear: true,
                    buttonImage: "../../images/calendar.png",
                    buttonImageOnly: true,
                    buttonText: "Select date",
                    dateFormat: "dd/mm/yy"
                });

HTML

<div class="col-lg-3">
            <div class="input-group">
                <input type="text" class="form-control" id="datepicker">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" id="btnPicker">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </button>
                </span>

            </div>
            <!-- /input-group -->
        </div>

Javascript

$(函数 () { $("#datepicker").datepicker({ 更改月份：真，更改年份：是的，日期格式：“dd/mm/yy” }).datepicker("setDate", new Date());

    $('#btnPicker').click(function () {
        //alert('clicked');
        $('#datepicker').datepicker('show');
    });
});

【讨论】：