如何在一个文本字段中显示开始日期和结束日期以及月份和年份应该下拉

Question

$(function() {
	$('input[name="datefilter1"]').daterangepicker({
	     autoUpdateInput: false,
	     locale: {
	        cancelLabel: 'Clear'
	   }
	});

	$('input[name="datefilter1"]').on('apply.daterangepicker', function(ev, picker) {
	     $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
	});
	
    $('input[name="datefilter1"]').on('cancel.daterangepicker', function(ev, picker) {
	   $(this).val('');
	});
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>


<input type="text" id="picker" class="date-selection">

输出应如上图所示，并且月份和年份也应类似于下拉列表。

Answer 1

在配置中添加 showDropdowns：true

$('#demo').daterangepicker({
    "showDropdowns": true,
    "startDate": "12/18/2019",
    "endDate": "12/24/2019",
    "maxDate": new Date()
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

<input type="text" name="datetimes" id="demo" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

Answer 2

我正在使用Litepicker。它功能强大，轻巧，无依赖性

let input = document.getElementById('litepicker')
let picker = new Litepicker({
    element: input,
    //format: 'DD/MM/YYYY',
    format: 'DD MMM YYYY',
    singleMode: false,
    numberOfMonths: 2,
    numberOfColumns: 2,
    showTooltip: true,
    scrollToDate: true,
    startDate: new Date().setDate(1), 
    endDate: new Date().getTime(),
    maxDate: new Date().getTime(),
    onSelect: function(date1, date2) { console.log(date1, date2) }
})

<input type="text" name="datetimes" id="litepicker" />
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.js"></script>