CODEWITHSUNDEEP
asp.net-mvchtmlkendo-uikendo-asp.net-mvc
shole
shole

Reputation: 4094

Add button inside Kendo MVC DatePicker

I have a Kendo MVC DatePicker as belowed, it will render as a textbox with a button (with calendar icon) within it which can trigger the date picker UI.

In my scenario, I need to insert a button to clear the value of the textbox, just on the left of the calendar button.

What my problem is that, is it possible (and how can I) insert another custom button inside the textbox rendered? 

 <div class="col-md-2 ">
  
   @(Html.Kendo().DatePicker()
   .Name("InspecitonDate")
   .Value(DateTime.Now.AddMonths(-3)).Format("dd/MM/yyyy")
   .HtmlAttributes(new { style = "width: 100%" })
   )
                    
</div>

Upvotes: 0

Views: 1151

Answers (2)

Maroof Raini
Maroof Raini

Reputation: 31

Kendo date picker adds attribute data-role so select all the controls through jQuery on page with attribute data-role = datepicker 

<script>
$(document).ready(function () {
    var dt = $("[data-role='datepicker']");

//For each control insert an icon button calling js function clearDate to clear date input 
$.each(dt,
    function (i, d) {
        $("#" + d.id).before("<span class='fa fa-times' onclick=\"clearDate('" + d.id + "')\"></span>");
    });
});

function clearDate(inputId) {
    $("#"+inputId).data("kendoDatePicker").value(null);
}

I would suggest to write this code in some common js file so that all kendo date controls in every page can be changed. You may add some style too to move icon to right

.k-picker-wrap > span.fa-times {
position: absolute;
right: 35px;
top: 8px;
color:#01ace4;
cursor: pointer;
}

Upvotes: 1

knikolov
knikolov

Reputation: 1800

There is no such built-in option, so you need to do it yourself. So you need to append the needed extra button on document.ready

Upvotes: 0

Related Questions