CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctwitter-bootstraphtml-helper
user1166085
user1166085

Reputation: 627

adding glyphicon from bootstrap 3 to html helper textboxfor

i have the following implementation that allow user to click on a text box that calls a jquery datepicker. i wish to add a glphyicon next to the textbox that will call a jquery datepicker that populate the same textbox/InputModel so that it will bind to the 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>

Upvotes: 1

Views: 860

Answers (3)

user1166085
user1166085

Reputation: 627

i have found a way to solve this issue. got this answer from 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>

Upvotes: 1

B. Ulaş Şenol
B. Ulaş Şenol

Reputation: 91

enter image description here

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

Upvotes: 1

Kallum Tanton
Kallum Tanton

Reputation: 777

Just put the Glyphicon inside a button then create an onclick event for the button that calls the show() method against the datepicker:

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

Be sure to use a unique ID/class when getting the button and the input itself, otherwise you could be opening datepickers from all over the form!

Upvotes: 0

Related Questions