Jquery 显示日期选择器';选择红色字体的日期,并将文本隐藏在p元素中

Jquery 显示日期选择器';选择红色字体的日期,并将文本隐藏在p元素中,jquery,jquery-ui-datepicker,Jquery,Jquery Ui Datepicker,我需要有datepicker(以芬兰语本地化),它允许在1996年1月1日和2015年12月31日之间选择日期。当用户选择日期时,所选日期显示在p元素中。p的开头文字中有:“日期尚未选定”。当从Datepicker中选择日期时,此文本将消失,所选日期将以红色字体显示在同一p元素中。所以 Datepicker目前运行良好,但如何将日历中的最后日期改为2015年12月31日,而不是2015年1月31日?我试图从这里检查示例,但结果并不完美: 选择日期后,如何使p中的文本消失(隐藏),并将其替换为所选

我需要有datepicker(以芬兰语本地化),它允许在1996年1月1日和2015年12月31日之间选择日期。当用户选择日期时,所选日期显示在
p
元素中。
p
的开头文字中有:“日期尚未选定”。当从Datepicker中选择日期时,此文本将消失,所选日期将以红色字体显示在同一
p
元素中。所以

  • Datepicker目前运行良好,但如何将日历中的最后日期改为2015年12月31日,而不是2015年1月31日?我试图从这里检查示例,但结果并不完美:

  • 选择日期后,如何使
    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>
    
    
    jQuery UI日期选择器-填充备用字段
    $(函数(){
    $(“#日期选择器”)。日期选择器({
    altField:“#备用”,
    altFormat:“日、日、月、年”,
    minDate:(新日期(1996年1月1日至1日)),
    maxDate:(新日期(2015年12月12日至31日))
    });
    $.datepicker.SetDefault(
    $扩展(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['fi']
    )
    );
    } );
    //我应该做这个,但是怎么做?
    $(“#日期选择器”)。在(“单击”,函数()上){
    隐藏();
    });
    

    尚未选择日期

    试试这个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">
    
    

    尚未选择日期 在此处选择日期:


    这是可行的,但现在我在本地化方面遇到了问题。当我尝试本地化它时,它不再工作了。我不知道如何本地化它以使ti工作。