JQuery datepicker在日期和月份之間換行

我想在日期和月份之間使用JQuery datepicker在輸入中添加<br>或其他東西。JQuery datepicker在日期和月份之間換行

我有下面的代碼：

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 
      } 
     } 
    });

更具體的最終輸入是這樣的：

，我想有這樣的事情：

非常感謝！

來源

2017-03-20 Dimitrios Polydoros

只使用日期選擇器，我認爲這是不可能的。但是你可以使用一些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 />

來源

2017-03-20 13:28:37 NetVicious

的最佳解決方案，並非常感謝！這也可以用於日期選擇器日期範圍嗎？ https://jsfiddle.net/kw4oya72 –

當然，我們只添加了一些CSS和一個跨度到datepicker填充日期的默認字段。日期選擇器範圍必須有和有兩種更改方法。檢查此示例：https：//jqueryui.com/resources/demos/datepicker/date-range.html – NetVicious

是的，但輸入值在日期範圍內不會更改。可以嗎？ –

JQuery datepicker在日期和月份之間換行

回答

相關問題