Add clickable date picker icon to input field

.NET
1

I have had a request from above to have a date picker icon to the right of an input field, at the moment its an empty input field with the only indicator the label saying its a date field.

How can I add to the code below, to add a date picker to the right, if it is possible.

var div = new TagBuilder("div");

            var dateTag = new TagBuilder("input");

            dateTag.AddCssClass("dateinput text-box single-line");
            dateTag.Attributes["data-include-time"] = includeTime.ToString();
            dateTag.Attributes["autocomplete"] = "off";
            dateTag.Attributes["readonly"] = "readonly";
            dateTag.Attributes["data-hiddenfield"] = "hdn" + fieldName;

            AddAdditionalAttributes(dateTag, additionalHtmlAttributes);

            var hiddenValueTag = new TagBuilder("input");

            hiddenValueTag.AddCssClass("dateinputvalue");
            hiddenValueTag.Attributes["id"] = "hdn" + fieldName;
            hiddenValueTag.Attributes["type"] = "hidden";
            hiddenValueTag.Attributes["name"] = fieldName;

            div.InnerHtml = dateTag.ToString() + "date_icon_in_here" + hiddenValueTag.ToString();

            return new MvcHtmlString(div.ToString(TagRenderMode.Normal));

The output for above is below

<div><input autocomplete="off" class="dateinput text-box single-line" data-hiddenfield="hdnDateTime" data-include-time="False" id="txtDateTime" readonly="readonly"></input>date_icon_in_here<input class="dateinputvalue" id="hdnDateTime" name="DateTime" type="hidden"></input></div>

I added ‘date_icon_in_here’ to try and get it working this way, keeping the code in the html if possible.

It’s not right or working but want to show I’m trying, as added to it as below, but still need help

div.InnerHtml = dateTag.ToString() + @Html.EditorFor(m => m.OrderDate, new { @class = "form-control datepicker", @id = "datepicker" }) + hiddenValueTag.ToString();
2

I’m thinking something along these lines, by adding a new span after the input as then wondering if there a way to add the datepicker as the span value, but not sure

var div = new TagBuilder("div");

            var dateTag = new TagBuilder("input");

            dateTag.AddCssClass("dateinput text-box single-line");
            dateTag.Attributes["data-include-time"] = includeTime.ToString();
            dateTag.Attributes["autocomplete"] = "off";
            dateTag.Attributes["readonly"] = "readonly";
            dateTag.Attributes["data-hiddenfield"] = "hdn" + fieldName;

            var datePickerIcon = new TagBuilder("span");

            datePickerIcon.AddCssClass("datepickerIcon");
            datePickerIcon.InnerHtml.ToString("<img src='Images/Shared/DatePicker.png'>");

            AddAdditionalAttributes(dateTag, additionalHtmlAttributes);

            var hiddenValueTag = new TagBuilder("input");

            hiddenValueTag.AddCssClass("dateinputvalue");
            hiddenValueTag.Attributes["id"] = "hdn" + fieldName;
            hiddenValueTag.Attributes["type"] = "hidden";
            hiddenValueTag.Attributes["name"] = fieldName;

            div.InnerHtml = dateTag.ToString() + datePickerIcon.ToString() + hiddenValueTag.ToString();

            return new MvcHtmlString(div.ToString(TagRenderMode.Normal));

The InnerHtml bit isn’t an option by the looks as getting a red squiggly line beneath the img src bit in the inverted commas

3

Ok I have managed to get the icon to show inside the span, and sitting alongside the input. So now I need I suppose to work out the trigger of clicking one class and populating the input class with the date value, umm

var div = new TagBuilder("div");

            var dateTag = new TagBuilder("input");

            dateTag.AddCssClass("dateinput text-box single-line");
            dateTag.Attributes["data-include-time"] = includeTime.ToString();
            dateTag.Attributes["autocomplete"] = "off";
            dateTag.Attributes["readonly"] = "readonly";
            dateTag.Attributes["data-hiddenfield"] = "hdn" + fieldName;

            var datePickerIcon = new TagBuilder("span");

            datePickerIcon.AddCssClass("datepickerIcon");
            datePickerIcon.Attributes["data-include-time"] = includeTime.ToString();
            datePickerIcon.InnerHtml = "<img src='Images/Shared/datePicker_Icon.jpg'>";

            AddAdditionalAttributes(dateTag, additionalHtmlAttributes);

            var hiddenValueTag = new TagBuilder("input");

            hiddenValueTag.AddCssClass("dateinputvalue");
            hiddenValueTag.Attributes["id"] = "hdn" + fieldName;
            hiddenValueTag.Attributes["type"] = "hidden";
            hiddenValueTag.Attributes["name"] = fieldName;

            div.InnerHtml = dateTag.ToString() + datePickerIcon + hiddenValueTag.ToString();

            return new MvcHtmlString(div.ToString(TagRenderMode.Normal))
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.