使用从DatePicker中选择的日期填充禁用字段

Question

我有asp.net webform datepicker（工作正常）但我想要做的是禁用该字段并在点击日历时显示日历在该字段旁边，然后在所选日期填充该字段，但我不确定如何执行此操作。

HTML

<div class="form-group">
    <asp:Label ID="Step03StartDateLabel" class="col-sm-4 control-label" runat="server" Text="Date you would like us to start *" AssociatedControlID="Step03StartDateField"></asp:Label>
    <div class="col-sm-2">
        <div class="input-group">
            <asp:TextBox ID="Step03StartDateField" runat="server" class="form-control" />
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03startDateErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03StartDateField" ErrorMessage="Please select a date you would want us to start." />
    </div>
</div>

JQuery的

$(function ()
{
     $("#MainContent_Step03StartDateField").datepicker(
     {
          dateFormat: 'dd/mm/yy'
     });
});

Answer 1

这是我找到的jsfiddle链接

jsfiddle/jquerycalender

$(function () {
        $("#datepicker").datepicker({
            showOn: "button",
            buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true
        });
    });

Date:<input type="text" id="datepicker" disabled="disabled" />

Answer 2

固定。将我的HTML更新为：

<div class="input-group">
     <asp:TextBox ID="Step03StartDateField" runat="server" class="form-control" disabled/>
     <div class="input-group-addon">
          <span class="glyphicon glyphicon-calendar" id="Step03StartDateFieldCalendar" style="cursor: pointer"></span>
     </div>
</div>

并将我的JQuery更改为：

$(function ()
{
     $("#MainContent_Step03StartDateField").datepicker(
     {
          dateFormat: 'dd/mm/yy',
     });

     $("#Step03StartDateFieldCalendar").click(function ()
     {
          $("#MainContent_Step03StartDateField").datepicker("show");
     });
});