JQuery 在日和月之间有换行符的日期选择器

Question

我想使用 JQuery 日期选择器在日期和月份之间的输入中添加 <br> 或其他内容。

我有以下代码：

jQuery('#checkin').datepicker({
        showAnim: "drop",
        dateFormat: "dd/mm/yy",
        minDate: "-0D",

    });

    jQuery('#checkout').datepicker({
        showAnim: "drop",
        dateFormat: "dd/MM/yy",
        minDate: "-0D",
        beforeShow: function () {
            var a = jQuery("#checkin").datepicker('getDate');
            if (a) return {
                minDate: a
            }
        }
    });

更具体地说，最终输入是这样的：

我想要这样的东西：

非常感谢！

Answer 1

我认为仅使用日期选择器是不可能的。但是你可以使用一点 Javascript 来做到这一点 ;-)

检查这个：

$(document).ready(function() {

  $('#date').on('click', function() {
    $('#thedate').datepicker('show');
  });

  $('#thedate').datepicker({
    dateFormat: 'd M yy',
    onSelect: function(selectedDate) {
      var arr = selectedDate.split(" ");
      $('#date').html("<span class='date_day'>" + arr[0] + "</span><span class='date_month'>" + arr[1] + "</span> <span class='date_year'>" + arr[2] + "</span>");
    }
  });

});

#date {
  padding: 10px;
  border: solid 1px black;
  width: 100px;
  text-align: center;
  cursor: pointer;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif
}

#date span.date_day {
  font-weight: bold;
  display: block;
}

#date span.date_month,
#date span.date_year {
  color: gray;
  font-size: 12px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id='date'>
  Select a date
</div>
<input id="thedate" type="hidden" /><br />

JQuery 在日和月之间有换行符的日期选择器

JQuery datepicker with a line break between day and month

javascript

jquery

jquery-ui-datepicker