Question

因此，我正在尝试按照 JQuery 日期选择器中给出的范围选项示例，如下所示：https://jqueryui.com/datepicker/#date-range（我将在下面发布代码以防页面更改。）

我想要做的是格式化输入字段，使其显示“MM yy”。但是，当我更改行 var dateFormat = "MM yy", 或在日期选择器部分添加 formatDate: "MM yy" 时，日期选择器允许 To 字段选择 From 日期之前的日期。本质上，我想要做的是创建一个远程月份选择器。

Jquery 的范围选择器示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <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>
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>
</head>
<body>
 
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>

我非常接近我想要的以下内容。最后一个问题是我无法隐藏日历，因此用户只能选择月份和年份。但如果没有答案，我可以忍受。

<div class="input-group row mb-3">
    <div class="col-6 text-right">
        <label class="pr-3 font-weight-bold" for="fromDate">Start Date:</label>
    </div>
    <div class="col-6">
        <input type="text" name="fromDate" id="fromDate" autocomplete="off"
               class="form-control ui-monthpicker col-6" aria-label="from-date"
               aria-describedby="from-date" data-date-format="mm-yyyy"/>
    </div>
</div>
<div class="input-group row mb-3">
    <div class="col-6 text-right">
        <label class="pr-3 font-weight-bold" for="toDate">End Date:</label>
    </div>
    <div class="col-6">
        <input type="text" name="toDate" id="toDate" autocomplete="off"
               class="form-control ui-monthpicker col-6" aria-label="to-date"
               aria-describedby="to-date" data-date-format="mm-yyyy"/>
    </div>
</div>

<script>
    let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August",
        "September", "October", "November", "December"];
    var monthNumber = {}
    for (var i = 0; i < monthNames.length; ++i) {
        monthNumber[monthNames[i]] = i;
    }

    $(document).ready(function () {

        $('.ui-monthpicker').datepicker({
            changeMonth: true,
            changeYear: true,
            maxDate: "+0D",
            dateFormat: 'MM yy'
        });

        $('#fromDate').datepicker('option', 'onClose', function (datePicker) {
            $(this).val(datePicker);
            let start = datePicker.split(' ');
            $('#toDate').datepicker("option", "minDate", new Date(start[1], monthNumber[start[0]]));
        });

    });
</script>

Answer 1

好的，经过更多的挖掘，我得到了答案（Java/Springboot/Thy:

sharedArrayBuffer

<div class="input-group row mb-3">
    <div class="col-6 text-right">
        <label class="pr-3 font-weight-bold" for="fromDate">Start Date:</label>
    </div>
    <div class="col-6">
        <input id="fromDate" type="text" th:field="*{fromDate}" autocomplete="off"
               class="form-control ui-monthpicker col-6"
               aria-label="from-date" aria-describedby="from-date"/>
    </div>
</div>
<div class="input-group row mb-3">
    <div class="col-6 text-right">
        <label class="pr-3 font-weight-bold" for="toDate">End Date:</label>
    </div>
    <div class="col-6">
        <input id="toDate" type="text" th:field="*{toDate}" autocomplete="off"
               class="form-control ui-monthpicker col-6"
               aria-label="to-date" aria-describedby="to-date"/>
    </div>
</div>

带有范围选择的日期选择器上的月年格式

1 个答案: