Question

我有以下实现，允许用户单击调用jquery datepicker的文本框。我希望在文本框旁边添加一个glphyicon，它将调用一个jquery datepicker来填充相同的文本框/ InputModel，以便它将绑定到InputModel。

// in view
@Html.TextBoxFor(m => m.InputModel.InputFromDate, 
new { @class ="datepicker", @placeholder = "Enter Date" })})

// in js
$(document).ready({
         $('.datepicker').datepicker();
    });

//add glyphicon
 <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>

Answer 1

<div class="form-group">
    <label class="control-label col-md-3">Input From Date</label>
    <div class="col-md-3">
        <div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy">
            @Html.TextBoxFor(m => m.InputModel.InputFromDate,
new { @class = "datepicker form-control", @placeholder = "Enter Date" })
            <span class="input-group-btn">
                <button class="btn default" type="button">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </div>
        <!-- /input-group -->
        <span class="help-block"> Select date </span>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
         $('.datepicker').datepicker();
    });
</script>

Answer 2

我找到了解决此问题的方法。得到了How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups

的答案

//in js
<script>
    $(document).ready(function () {
        $("#datepicker-from").datepicker();
        $("#datepicker-to").datepicker();
        $('#fromBtn').click(function () {
            //alert('clcikec');
            $("#datepicker-from").focus();
        });
        $('#toBtn').click(function () {
            //alert('clcikec');
            $("#datepicker-to").focus();
        });
    })
</script>

<div class="col-md-3">
                    <label class="control-label">Date From</label>
                    <div class="input-group">                        
                        @Html.TextBoxFor(m => m.Input.InputFromDate, new { @id = "datepicker-from", @class = "form-control", @placeholder = "Enter from Date" })
                        <span class="input-group-addon" id="fromBtn" style="cursor:pointer;">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>

Answer 3

只需将Glyphicon放在一个按钮中，然后为按钮调用onclick方法创建一个show()事件：

$('.my-button').click(function(e){
    $('.my-datepicker').datepicker('show');
}

获取按钮和输入本身时一定要使用唯一的ID /类，否则你可以从整个表单中打开日期选择器！

将bootphrap 3中的glyphicon添加到html helper textboxfor

3 个答案: