I am porting an app from 14.2 to 17.1. I am trying to get the DatePicker to look like in the attached image from my 14.2 app, but have been unsuccessful. I cannot get the calendar image to display. The relevant code is shown below. What am I doing wrong here?
Thanks,
Arthur
#exam-date { background: transparent; border: none; padding: 0; color: transparent; font-weight: bold; color: #F6BF46; font-family: Tahoma, Arial, sans-serif; font-size: 13px;}
#exam-date .ui-igedit-buttonimage .ui-icon-triangle-1-s .ui-icon { width: 16px; height: 16px; background-image: url(themes/brand/img/calendar_16.png); background-position: 0px 0px;}
@(Html.Infragistics().DatePickerFor(m => m.ExamDate) .ID("exam-date") .ButtonType(TextEditorButtonType.DropDown) .PlaceHolder("Enter date") .MinValue(@Model.MinExamDate.Date) .MaxValue(@Model.MaxExamDate.Date) .ClientEvents(new Dictionary<string, string>() { { "valueChanged", "function(evt, ui) { updateExamDate(ui.newValue) }" } }) .Width(70) .DateDisplayFormat("d MMM") .DateInputFormat("d MMM") .Render())
Arthur,
I actually managed to show the custom image using "css/themes/infragistics/infragistics.theme.css" and "css/structure/infragistics.css". Can you please try the following change in your css:
#exam-date .ui-igedit-buttonimage { width: 16px; height: 16px; background-image: url(themes/brand/img/calendar_16.png)!important; background-position: 0px 0px;}
Please, let me know if this overrides the style for you successfully and if anything else pops out - don't hesitate to contact the support again.
Regards,Alexander
I have tried this, but no luck. On the network trace, I cannot see any request for that image file. Do you have an example that demonstrates this?
Thank you. This along with a few other changes allowed me to get the look that I wanted for the control.
Hello Arthur,
Can you please have a look at the attached sample. The id of the button element is autogenerated based on the id of the editor. In this case the css looks like this:
<style> #TDate_calendarButton .ui-igedit-buttonimage { width: 16px; height: 16px; background-image: url("themes/brand/img/calendar_16.png")!important; background-position: 0px 0px; }</style>
I hope this will help you in your scenario.
Best regards, Alexander Marinov,Infragistics