Отображение выбранной даты Datepicker красным шрифтом и скрытие текста в элементе p - PullRequest
Новая
       29

Отображение выбранной даты Datepicker красным шрифтом и скрытие текста в элементе p

1 голос
/ 17 октября 2019

Мне нужно иметь средство выбора даты (локализовано на финском языке), которое позволяет выбирать дату между 01.01.1996 и 31.12.2015. Когда пользователь выбрал дату, выбранная дата отображается в элементе p. p имеет в начале текст, который гласит: «Дата еще не выбрана». Когда дата выбирается из DatePicker, этот текст исчезает, и выбранная дата отображается красным шрифтом в этом же элементе p. Итак ...

  1. Пока Datepicker работает нормально, но как я могу изменить последнюю дату в каландре на 31.12.2015 вместо 31.1.2015? Я попытался проверить пример отсюда, но он не работает идеально: https://jqueryui.com/datepicker/#min-max

  2. Как я могу сделать так, чтобы текст в 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>

1 Ответ

1 голос
/ 20 октября 2019

Попробуйте это 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">
...