输入日期字段应仅显示月份和年份

Question

问题是当用户选择输入日期字段然后仅显示月份和年份而不显示日期时。 我曾在我的jquery中尝试过mm / yy，但没有为我工作。 这是我的代码。

var onDateSelect = function(selectedDate, input) {
  if (input.id === 'Start') { //Start date selected - update End Date picker
    $("#End").datepicker('option', 'minDate', selectedDate);
  } else { //End date selected - update Start Date picker
    $("#Start").datepicker('option', 'maxDate', selectedDate);
  }
};
var onDocumentReady = function() {
  var datepickerConfiguration = {
    dateFormat: "dd/mm/yy",
    onSelect: onDateSelect
  };
  ///--- Component Binding ---///
  $('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady);  // jQuery DOM ready callback registration

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.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>

<input type="text" id="Start" name="start" min="2000-03" required>
    <input type="text" id="End" name="start" min="2000-03" required>

我选择第一个日期字段，它也应该显示月份和年份，第二个字段与第一个字段相同，除了不相应地显示前一个日期的第一个日期，因此除了显示月份和年份外，它都可以正常工作

Answer 1

您可以使用mm/yy仅显示月份和年份，也需要手动获取日期，然后在日期选择器中进行设置。即：

var onDateSelect = function(selectedDate, input) {
  if (input.id === 'Start') {
   //getting start date
    var start = $('#Start').datepicker("getDate");
    console.log("start - "+start);
    //setting it has mindate
    $("#End").datepicker('option', 'minDate', start);
  } else if(input.id === 'End'){ 
   //getting end date
    var end = $('#End').datepicker("getDate");
    console.log("end - "+end);
    //passing it max date in start
    $("#Start").datepicker('option', 'maxDate', end);
  }
};
var onDocumentReady = function() {
  var datepickerConfiguration = {
    onSelect: onDateSelect,
    dateFormat: "mm/yy",
  };
  ///--- Component Binding ---///
  $('#Start, #End').datepicker(datepickerConfiguration);
  
};
$(onDocumentReady); // jQuery DOM ready callback registration

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<input type="text" id="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>

Answer 2

这不是一个完美的解决方案，但是您可以使用<input type="month">。

---

示例

<label for="start">Start month:</label>

<input type="month" id="start" name="start"
       min="2020-08" value="2020-10">

结果：