問題は、ユーザーが入力日付フィールドを選択しているときに、日付ではなく月と年のみが表示されることです。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>
最初の日付フィールドを選択します。月と年を表示する必要があります。2番目のフィールドは最初のフィールドと同じですが、前の日付を表示しないので、月と年を表示する以外は正常に機能します
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加