Question 227948 in Html Question posted in
Some basic documentation can be found here.

Html – the datepicker not showing the default text dd/mm/yyyy on mobile

This is a JSP.
I’m using Bootstrap5 and this is my code :

<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>

the view on Desktop :

enter image description here

the view on Mobile

enter image description here

this is how I import bootstrap :

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
//code
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>

I have read this answer :
Date field default text "DD-MM-YYYY" not showing on mobile devices but showing on Desktop

but I didn’t find it practical.

Remarque : When I test the mobile view with dev tools in the browser it works fine. the problem shows off only when Im on mobile.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone facing this problem in the futur. Here's how I solved it using 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;}

}

    in HTML just use the attribute placeholder.


  2. 0

    I see. This is a known issue with the Bootstrap datepicker library. The default text for the date picker is not displayed on mobile devices if the format option is set to ‘dd/mm/yyyy’.

    To fix this issue, you can use the todayHighlight option to set the default text to ‘Today’. The following code will fix the issue:

    $('#startDate').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight: true
});

    The todayHighlight option will highlight the current date in the date picker, and the default text will be set to ‘Today’. This will work on both desktop and mobile devices.

    Solution with Javascript

    This code uses the addEventListener() method to listen for the focus event on the input fields. When the input fields are focused, the code will set the value of the input fields to the current date. This will work on both desktop and mobile devices.

    <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" id="startDate" name="startDate" style="font-size:.9rem">
    <script>
        const startDate = document.getElementById('startDate');
        startDate.addEventListener('focus', () => {
            const today = new Date();
            startDate.value = today.toLocaleDateString('en-US');
        });
    </script>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="date" class="form-control" id="endDate" name="endDate" style="font-size:.9rem">
    <script>
        const endDate = document.getElementById('endDate');
        endDate.addEventListener('focus', () => {
            const today = new Date();
            endDate.value = today.toLocaleDateString('en-US');
        });
    </script>
    </div> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search