jquery ui 日期选择器，文本框中带有默认文本

Question

我们有什么办法可以拥有默认文本值（不是某个日期，而是某种标签，它显示在文本框中，但如果用户选择某个日期，则会更改为选定的日期。

// I want the MM/DD/YYYY to be displayed inside text box if no date is selected by user

    <input id="datePicker" value ="MM/DD/YYYY">
    $(function() { 
    $( "#datepicker" ).datepicker( )});

我尝试添加一个带有 mm/dd/yyyy 的虚拟输入框，并使用焦点和模糊方法显示和隐藏相同的输入框，但它无法正常工作。 有什么优雅的方法来实现这一点吗？任何帮助表示赞赏。 PS：我没有使用 html5，我需要这个东西在 ie 8 ,9 中工作。 它应该看起来像这样

Answer 1

您可以在

placeholder="MM/DD/YYYY"

内添加

<input>

，

<input id="datePicker" placeholder="MM/DD/YYYY"

>

Answer 2

将此添加到 HTML 页面的脚本标记内（或 onload）。这将在输入框中显示当前日期。您可以在输入中使用

title="Enter MM/DD/YYYY"

来显示工具提示。如果你确实想在文本中显示 MM/DD/YYYY，你可以使用 css 背景图像属性。我不擅长 css，但我想它会起作用（只需创建一个带有文本 MM/DD/YYYY 的小 png。

Date.prototype.formatMMDDYYYY = function(){
        return this.getMonth() + 
        "/" +  this.getDate() +
        "/" +  this.getFullYear();
    }

    var dt = new Date();
    $('#datePicker').val(dt.formatMMDDYYYY());


        $(function() { 
        $( "#datePicker" ).datepicker( )});

Answer 3

如果您想在所有站点中具有统一的日期选择器行为，只需覆盖

datepicker()

函数即可：

$(function () {
    var pickerFn = $.fn.datepicker,
        placeholder = 'MM/DD/YYYY';

    $.fn.datepicker = function () {
        var datePicker = pickerFn.apply(this, arguments);  

        var self = this;
        self.attr('placeholder', placeholder);

        return datePicker;
    };
});

Answer 4

<input id="datePicker" placeholder="MM/DD/YYYY">

<script type="text/javascript">
$(function() {
  $('#datePicker').daterangepicker({
      autoUpdateInput: false
 });
</script>

Answer 5

我已经得到了这个解决方案（评论是西班牙语）：

$(document).ready(function () {
    var birthdateInput = $("#details-date");

    // Inicia con un input tipo text y un placeholder
    birthdateInput.attr({
        "type": "text",
        "placeholder": "Fecha de nacimiento"
    });

    // Detecta el clic en el input
    birthdateInput.on("click", function () {
        // Verifica si el input actualmente es de tipo text
        if ($(this).attr("type") === "text") {
            // Cambia a tipo date
            $(this).attr("type", "date");
        }
    });

    // Verifica cuando el valor cambia (se ha seleccionado una fecha)
    birthdateInput.on("change", function () {
        // Verifica si el input tiene un valor
        if ($(this).val() === "") {
            // Si no hay valor, cambia de nuevo a tipo text
            $(this).attr({
                "type": "text",
                "placeholder": "Fecha de nacimiento"
            });
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row mt-5">
    <div class="col-md-4">
      <input 
        name="birthdate" 
        id="details-date"
        class="form-control"
         type="date"
        />
    </div>
  </div>
</div>