Transform the <span> element into a calendar for selecting dates

This is the HTML view of my GUI https://i.sstatic.net/F0sxH.png and below is my actual HTML code:

<div class="row">
            <div class="col-md-5" style="padding: 35px;">
                <span style="font-size: 16px;">From</span>
                <p style="padding-left: 20px;padding-top: 15px;">
                    <i class="fa fa-calendar" style="font-size:30px">
                        <input type="date" dataformatas="" />
                        <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>
                    </i>
                </p>
            </div>
            <div style="margin-top: 40px;" class="col-md-1">
                <div class="vl"></div>
            </div>
            <div class="col-md-5" style="padding: 35px;">
                <span style="font-size: 16px;">To</span>
                <p style="padding-left: 20px;padding-top: 15px;">
                    <i class="fa fa-calendar" style="font-size:30px">
                        <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>
                    </i>
                </p>
            </div>
        </div>

How can I convert this span tag into a date picker?

Thanks, Buddhika.

htmlcssbootstrap-4

Answer №1

To replace a span with a datepicker, you have a few options.

The simplest way is to use the <input type="date> element and let the browser handle the date selection. The downside is that this input cannot be styled much.

Alternatively, you can choose a JavaScript library to render the datepicker for you. Two popular libraries are:

These are just two of many options available. If you search for javascript datepicker, you will find various other libraries to choose from based on your preferences.

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

Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: https://i.sstatic.net/eUyBB.png The first row has a background color and the second row is white - which is correct. Now I would like to align the attributes to the right. I added the following code to the table: .table ...

javascripthtmlcss

Incorporate a Burger Icon into the Navigation Menu

insert image description here I am currently working on implementing a hamburger slide-out feature in my navigation bar. The desired behavior is for the sidebar to slide out to the right. We are using Elementor within WordPress for this project. Has anyone ...

csswordpressdrop-down-menunavigationelementor

Conceal the search bar for a specific route in Angular6

I am looking to show an input in my header only when the route is /home and hide it for all other routes. I have attempted some code but it does not seem to be working as expected. .html <div *ngIf="searchBarVisible"> <input class="form-cont ...

htmlangular

Click on the div element to make it fade in, and then click either inside or outside the div to make it

Recently, I successfully created a code that enables users to open a second div by clicking on a specific div. The second div is initially hidden with the CSS property display: none. To close it, users simply need to click on the same div again. Although ...

jqueryhtmlclickfade

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I ...

javascriptjqueryhtmlcss

Struggling to implement a vertical scroll bar within a nested div element

Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'. My specific requirements are: The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50 ...

cssoverflow

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

htmlcssbootstrap-4horizontal-scrolling

Error encountered during npm installation caused by the extract-text-webpack-plugin

I encountered an error while attempting to install the extract-text-webpack-pluginpm plugin. extract-text-webpack-plugin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f12124c5e495a125b5a495e4f4f7f0f110e110f">[email  ...

cssnpmwebpack

Style not being applied to CSS class

When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag ...

htmlcssdjango

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

javascriptjqueryhtml

Contact Form Appears to Be Functioning Properly, Yet Emails Are Not Being Received (HTML5 & PHP)

Hello everyone, I need some assistance with creating a contact form. This is my first time working on this, and I am facing an issue. I am using HTML5, which I have some knowledge of, and PHP, which I am not very familiar with. When I try to test the form ...

phphtmlforms

Issues with form inputs alignment in Bootstrap 4 styling

Check out this sample jsFiddle I created, using the html directly from my website. The css for bootstrap 4 is included, which I compiled using sass in addition to my custom css. Everything seems to align perfectly on all screen sizes, except for small dis ...

htmlcsstwitter-bootstrap

Tips for sending an unchecked checkbox to a post

I am facing an issue where only the checked checkboxes are being sent in $_POST. I want the checked checkboxes to have a value of 'true' and the unchecked ones to have a value of 'false' in $_POST. Is there a way to achieve this or does ...

phphtmlpost

Creating a clickable navigation menu item with a clickable caret located on the same line

I've been developing a solution using Twitter Bootstrap to create a main navigation menu that expands upon hover on desktop, while the menu expands when clicking the caret on mobile (caret hidden on desktop). Additionally, I aimed to make the top-leve ...

csstwitter-bootstrap

Tips on incorporating a plus symbol (+) into a list using the <li> tag?

Is it possible to use a plus sign as the list style instead of Disc or Circle in <li> elements? li {list-style: disc...} ...

htmlcsshtml-lists

Is it possible to create an image or logo that moves in sync with the user's scrolling

Having trouble articulating this question, but I'm trying to replicate the logo in the top right corner of this website: I want the logo to move along with the user as they scroll down, remaining visible at all times. Any ideas on how to achieve this ...

htmlcssimagescroll

What is the process for modifying the value of a concatenated string?

I have a scenario where I need to extract the date of a blog post from one page on a website and display it on another page within the same site. Initially, the date is shown as 2/22/18 on the first page. With the jQuery code provided below, I am able to ...

jqueryhtml

Creating a sizable chart that spans across multiple pages

My PHP output generates an HTML table with size XL. I want to add a print button on the page that will automatically print out the table with correct formatting. Specifically, I hope to print the table horizontally with headers appearing on every printed ...

phphtmlcssprintinghtml-table

What could be causing the button element to not appear alongside the input form?

I'm facing an issue with the positioning of elements that I don't usually encounter. I simply want the subscribe button to be 20% wide and positioned to the left of the input form. Despite trying various methods like block display, inline, or fl ...

htmlcss