以红色字体显示 Datepicker 的选定日期并将文本隐藏在 p 元素中

Question

我需要有日期选择器（本地化为芬兰语），它允许在 1/1/1996 和 31/12/2015 之间选择日期。当用户选择日期时，所选日期显示在 p 元素中。 p 的开头文本为："The date is not chosen yet"。当从 Datepicker 中选择日期时，此文本消失，并且所选日期在同一 p 元素中以红色字体显示。所以...

到目前为止，日期选择器工作正常，但我如何才能将日历中的最后日期更改为 2015 年 12 月 31 日，而不是 2015 年 1 月 31 日？我试图从这里检查示例，但结果并不完美：https://jqueryui.com/datepicker/#min-max
如何让 p 中的文本在选择日期后消失（隐藏）并替换为所选的红色字体的日期？

到目前为止，这是我的代码。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Populate alternate field</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="finnish.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy",
      minDate: (new Date(1996, 1-1, 1)),
      maxDate: (new Date(2015, 12-12, 31))
    });

  $.datepicker.setDefaults(
  $.extend(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['fi']
  )
);
  } );

//I should work on this, but how?
$( "#datepicker" ).on( "click", function() {
hide();
});


  </script>
</head>
<body>

<p id="text">The date is not chosen yet<input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"></p>


</body>
</html>

Answer 1

试试这个 JQuery:

  $( function() {
    $( "#datepicker" ).datepicker({
      dateFormat: "DD, d MM, yy",
      minDate: (new Date(1996, 1-1, 1)),
      maxDate: (new Date(2015, 12-1, 31)),
      onSelect: function(){
        var selected = $(this).val();
        $("#result").html(selected).css('color', 'red');
        }
    });
  } );

和 HTML 正文：

<p id="result">The date is not chosen yet</p>&nbsp;
Select date here:<input type="text" id="datepicker">

以红色字体显示 Datepicker 的选定日期并将文本隐藏在 p 元素中

Showing Datepicker's chosen date in red font and hiding the text in p element

jquery

jquery-ui-datepicker