Creating an interactive date selection feature with a calendar icon in MVC 5

I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the code I am using:

  @Html.TextBoxFor(model => model.myDatePicker, new { @class = "form-control myDatePicker" })
  <span class="glyphicon glyphicon-calendar"></span>

The issue is that the calendar icon is displayed on the next line because the Span element is outside @Html.TextBoxFor. (I do not have enough reputation points to post images, so I cannot provide an example)
Is there a way to include the calendar icon inside @Html.TextBoxFor?

Alternatively, should I add CSS to achieve this?

Any suggestions or input on this matter would be greatly appreciated.

Answer №1

Give this a shot:

<div>
  @Html.TextBoxFor(model => model.myDatePicker, new { @class = "form-control myDatePicker" })
  <span class="glyphicon glyphicon-calendar"></span>
</div>

or maybe this:

<div>   
  <span class="glyphicon glyphicon-calendar"></span>
   @Html.TextBoxFor(model => model.myDatePicker, new { @class = "form-control myDatePicker" })
</div>

or even consider trying this alternative:

<div>   
  <span class="glyphicon glyphicon-calendar">
   @Html.TextBoxFor(model => model.myDatePicker, new { @class = "form-control myDatePicker" })
  </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to control the playback of a video, such as

Currently, I am involved in a project related to IPTV. One of my objectives is to be able to capture the moment at which a video is paused so that when clicking on another button, a small iframe opens with the same video continuing from where it was origin ...

What steps can be taken to resolve the issue with the background's placement?

https://i.sstatic.net/d3GEw.jpg There seems to be an issue with the border being hidden. I've tried adjusting the background-position variables, but without success. Here is a code example: * { margin: 0; padding: 0; } .container { ...

Sorry, the server cannot be reached at the moment. Please try again later

Recently delving into Node.js and just getting started on using MongoDB. Currently establishing a connection with my MongoDB Cluster that I have set up. const dbURI = 'mongodb+srv://testuser:<a href="/cdn-cgi/l/email-protection" class="__cf_email_ ...

Having trouble with jsPlumb accurately rendering lines

http://jsbin.com/ofapew/1/edit I am currently experimenting with jsPlumb to connect two points, specifically trying to link the green dots to the top of a black border box. One thing that is puzzling me is that even though the green dot end point appears ...

Technique in CSS/SASS to repair a div

Seeking a solution for fixing divs with text in CSS. I am aware of the background-attachment: fixed; property which creates a fancy effect. Is there a similar property to "fix" divs with text or how can this be achieved in Typescript? Your insight would be ...

Maximizing the potential of image srcset in HTML5

After configuring the img srcset as shown below: <img srcset="http://via.placeholder.com/320x150 320w, http://via.placeholder.com/480x150 480w, http://via.placeholder.com/800x150 800w" src="http://via.placeholder.com/8 ...

Tips on incorporating the $ symbol into a pseudo element

Can I add a price using a pseudo element? h3:after{ content: " (+ $75)"; } <h3>price</h3> The CSS minifier is preventing the display of "$75". How can I work around this issue? ...

The function app.post in Express Node is not recognized

I decided to organize my routes by creating a new folder called 'routes' and moving all of them out of server.js. In this process, I created a file named 'apis.js' inside the routes folder. However, upon doing so, I encountered an error ...

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

What is the best way to trigger a jQuery function once a form has been successfully submitted?

Is there a way to execute a jQuery function AFTER a form has been submitted? I am familiar with calling a function ON submit, but I specifically need it to run after the form data has been posted and stored in the database using PHP. In my website projec ...

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

Unexpected behavior observed with field alignment

I've been attempting to align the field in an Angular HTML page, but it's not working out as I expected. Here's how the HTML file looks: <div id="report-prj-search"> <div class="dx-fieldset flex-column"> <div class="fle ...

++first it must decrease before it increases

I'm attempting to create a basic counter feature, where clicking on a button labelled "+" should increase a variable named Score by 1, and the "-" button should decrease it by 1. However, I've encountered an issue where pressing the "+" button fo ...

Implementing ajax functionality for a form component in vuejs

I am currently working with a Vue.js component that serves as a form with a single field for an email input. The default value of this field, "email", is provided to the component by the parent as a prop. Upon form submission, I need to trigger an event to ...

Utilizing lodash to Filter Arrays Within Arrays

Let's take a look at the JSON structure provided below. comapany : ABC Emp Info:[ { empName: D, empID:4 salary[ { year: 2017, ...

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

Get the MAC address of a client using Node.js

I have a project in progress that aims to help my home automation system recognize the presence of individuals at home by using their MAC addresses as identifiers. In my attempt to collect the MAC address of a client on my network, I utilized Nodejs along ...

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Here is the structure of an array I am working with: 0: {ID: null, name: "test", city: "Austin", UserColors: [{color: "blue"},{hobby:"beach"} ... ]} }... I am currently attempting to ng-repeat over this initial array in my code. However, when I tr ...

Using Promise to manipulate objects and arrays returned from functions

https://i.stack.imgur.com/jvFzC.png router.get('/', function (req, res, next) { var size = req.params.size ? parseInt(req.params.size) : 20; var page = req.params.page ? req.params.page>0 ? (size&(parseInt(req.params.page)-1)) : ...

Using JQuery to make POST requests is successful, however, utilizing the XMLHttpRequest object to make

Currently, I am attempting to make a POST request from Javascript to my server in PHP but without utilizing jQuery. The following code successfully sends the required data to the database: var msg = {}; msg['name'] = 'joe'; msg['m ...