日期选择器二次点击日期字段时不应显示已选日期的技术问题

Alright, let's sort out this issue where clicking your date input again keeps showing the already selected date, instead of letting you pick a new one from a fresh calendar view. Looking at your provided markup, here's how we can adjust the behavior:

First, let's recap your HTML structure for reference:

<span class="RegistrationDate">Registration Date</span> 
<div class=" col-sm-8 col-md-4 col-lg-4 input-group date" id="dateofRegistration" style="padding-top: 10px;"> 
  <input placeholder="DD/MM/YYYY" type="text" class="form-control" id="datepicker1"> 
  <div class="input-group-addon" for="datepicker"> 
    <i class="fa fa-calendar"></i> 
  </div> 
</div>

The Problem #

Most datepicker plugins (like Bootstrap Datepicker, which your markup hints at) retain the selected value by default. When you click the input again, it focuses on the existing value and shows the calendar with that date highlighted—this is why you can't easily re-select from scratch.

Solution: Clear Value & Reset Datepicker on Click #

We'll add a click handler to the input (and calendar icon) that clears the existing value and resets the datepicker's internal state, so it opens to a clean calendar view.

For Bootstrap Datepicker

Add this JavaScript code (make sure you've loaded jQuery and Bootstrap Datepicker first):

$(document).ready(function() {
    // Initialize your datepicker with desired settings
    $('#datepicker1').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
        todayHighlight: true
    });

    // Handle click on the date input
    $('#datepicker1').on('click', function() {
        const $input = $(this);
        // Only clear if there's a value present
        if ($input.val().trim() !== '') {
            $input.val('');
            // Reset the datepicker's internal selected date
            $input.datepicker('update', null);
        }
    });

    // Also handle clicks on the calendar icon
    $('.input-group-addon').on('click', function() {
        const $input = $('#datepicker1');
        if ($input.val().trim() !== '') {
            $input.val('');
            $input.datepicker('update', null);
        }
        // Force the datepicker to open
        $input.datepicker('show');
    });
});

For jQuery UI Datepicker

If you're using jQuery UI's Datepicker instead, use this adjusted code:

$(document).ready(function() {
    $('#datepicker1').datepicker({
        dateFormat: 'dd/mm/yy',
        showOn: "both",
        buttonText: "Select date"
    });

    $('#datepicker1').on('click', function() {
        const $input = $(this);
        if ($input.val().trim() !== '') {
            $input.val('');
            $input.datepicker('setDate', null);
        }
    });
});

How This Works #

• We first initialize the datepicker with your preferred formatting and behavior.
• The click event checks if the input has a value—if it does, we clear the input field and use the datepicker's built-in method (update for Bootstrap, setDate for jQuery UI) to reset its internal state.
• We also handle the calendar icon click to ensure the same behavior applies when users click the icon instead of the input.

This way, every time you click the date field or icon, if there's an existing date selected, it gets cleared, and the datepicker opens to a fresh calendar view ready for a new selection.

内容的提问来源于stack exchange，提问作者Dip Girase