The datepicker on mobile devices fails to display the default text of dd/mm/yyyy

This JSP code uses Bootstrap5:

<form action="" method="GET" class="row g-1 mb-3 ">
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="date" class="form-control" name="startDate" style="font-size:.9rem">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="date" class="form-control" name="endDate" style="font-size:.9rem">
    </div> 
</div>

Here is the view on Desktop :

https://i.sstatic.net/IEEss.png

And this is how it looks on Mobile

https://i.sstatic.net/qjniE.png

This is the way Bootstrap is imported :

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b16">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
//code
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4abb4a9">[email protected]</a>/dist/js/bootstrap.bundle.min.js" ></script>

The user had read a related answer about date fields but found it impractical. They noted that testing in browser dev tools worked fine for mobile view, indicating the issue occurred only on actual mobile devices.

htmlcssbootstrap-5

Answer №1

If you encounter this issue in the future, here is how I tackled it with a combination of CSS and JS.

JS :

   const dateInputs = document.querySelectorAll('input[type="date"]');

dateInputs.forEach(input => {
  input.addEventListener('input', function() {
    if (this.value !== '') {
      this.classList.add('has-value');
    } else {
      this.classList.remove('has-value');
    }
  });
});

CSS :

@media (max-width: 640px) {

    input[type="date"]::before{
        color: #999;
        content: attr(placeholder);
        margin-right: 3px;

    }
    input[type="date"]:focus::before {
        content: attr(placeholder) !important;

    }
    input[type="date"].has-value:focus::before {
        content: none !important;

    }
    input[type="date"].has-value::before {
        content: none !important;
        
    }

    input[type="date"] {
        display: flex;}

}

To implement this, simply utilize the placeholder attribute in your HTML code.

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

executing a pre-existing executable file within a web browser or XAML Browser Application (

Currently, I have an application (let's call it exe1) provided by the supplier of our instruments that I would like to integrate into my existing application. Instead of rewriting exe1 from scratch, I am considering embedding it using something like a ...

c#htmlwpfxbap

Elevate your website with a mesmerizing CSS effect: watch

I am trying to achieve a CSS3 effect where an image slides up when hovered over, similar to this. I came across this example, but I do not want to use the box's background property. <div class="box"> <img src=image/image.jpg> & ...

css

Leveraging the Xpath Contains function to locate an element with specific text content

For my Selenium Xpath locators, I have always used the Contains function successfully. However, I recently encountered an issue where it does not work for a TD element in a table, despite sending the correct text to the function. To replicate the problem ...

htmlseleniumxpath

Struggling to properly position buttons within a horizontal form layout in Bootstrap

I'm facing an issue with aligning buttons and inputs in my code. The buttons are currently aligned with the labels, but I want them to be aligned with the inputs instead. I've tried using inline forms, but it's not working as expected. What ...

htmlcsstwitter-bootstrap

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

javascripthtmlgoogle-chrome

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

javascriptcssreactjsreact-nativecss-animations

problem with transmitting information through $.ajax

I'm facing a frustrating issue with the $.ajax()... function in my PHP code. I am unable to retrieve the data sent by the ajax request. <?php if ($_POST){ include 'Bdd_connexion.php'; $filiere = $_POST['filiere']; ...

javascriptphpjqueryhtmlajax

Which language should I focus on mastering in order to create a script for my Epson receipt printer? (Check out the manual for reference)

Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...

javascripthtmlcssxml

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

For a school project, I've been tasked with creating a web application that can fingerprint users or visitors. This means gathering details about their device such as OS, browser, IP address, country, city, and more. The app needs to be modern and re ...

javascriptphphtmldjangolaravel

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

javascripthtmlangulartypescriptcheckbox

What is the best way to create a video that adjusts to different screen sizes within

I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why? How could I fix that? Here is the CSS ...

htmlcssresponsive-design

Exploring CSS Shapes: Unveiling the secrets behind the star. What's the mechanism at

https://i.stack.imgur.com/0BgQr.png Take a look at the code snippet below showcasing The Shapes of CSS. I'm interested in delving into the intricacies of these CSS properties. How exactly do shapes in CSS function? This includes pseudo CSS, borders, ...

htmlcsscss-shapes

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation

unable to locate public folder in express.js

I recently created a basic server using Node.js with Express, and configured the public folder to serve static files. Within my main index.js file, I included the following code: const express = require('express'); const app = express(); const h ...

javascriptcssnode.jsexpressfile

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

htmlcss

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

javascripthtmlcssbootstrap-4

Widget remains static until job triggers data refresh, preventing CSS transition initialization

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...

htmlcsssasscss-transitionsdashing

Prevent scrolling in a full-screen modal using CSS

I came across a beautiful fullscreen modal that is purely based on CSS. The only issue I encountered was that the modal isn't scrollable. I attempted various solutions but haven't been successful. Here's the script I am using: ...

htmlcssmodal-dialog