是否可以将选择下拉列表转换为jQuery UI Datepicker中的水平月份列表？

时间：2017-08-20 12:26:35

标签： javascript jquery datepicker jquery-ui-datepicker uidatepicker

我根据jQuery UI Datepicker构建日历，可以选择一次显示3个月的日期范围。现在它看起来像截图： calendar

因此，我需要在此日历上方添加一个块，从当前月份开始有12个水平定位的月份。我想我需要将默认选择下拉列表与月份转换为此水平列表，但由于我对JavaScript的经验不足，我甚至无法通过互联网上类似示例的帮助将其用于工作。

months

如果您在此区块中选择一个月，则应将日历切换为3个月。希望你能给我一个解决方案。

这是我目前的代码：

＆＃13;
＆＃13; 
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
dateFormat: 'dd.mm.yy',
minDate: 0,
maxDate: new Date(new Date().getTime() +  365 * 24 * 60 * 60 * 1000),
beforeShowDay: function(date) {
	var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
	var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
	if (startDate && endDate && startDate - endDate) {
		if (endDate <= date && date <= startDate) {
			if (startDate && date && (startDate.getTime() === date.getTime())) {
				console.log('from end to start - backward - red-start ');
				return [true, 'ui-red-end', ''];
			}
			if (endDate && date && (endDate.getTime() === date.getTime())) {
				console.log('from end to start - backward - red-end ');
				return [true, 'ui-red-start', ''];
			}
			console.log('from end to start - backward');
			return [true, 'ui-state-selected-range', ''];
		}
	}
	if (startDate <= date && date <= endDate) {
		console.log('from start to end - forward');
		if (startDate && date && (endDate.getTime() === date.getTime())) {
			console.log('from start to end - forward - red-end');
			return [true, 'ui-red-end', ''];
		}
		if (endDate && date && (startDate.getTime() === date.getTime())) {
			console.log('from start to end - forward - red-start');
			return [true, 'ui-red-start', ''];
		}
	}
	if (startDate <= date && date <= endDate) {
		console.log('from start to end');
		return [true, 'ui-state-selected-range', ''];
	}
	return [true, '', ''];
},
onSelect: function(dateText, inst) {
	var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
	var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
		if (!startDate || endDate) {
			$('#start-date').val(dateText);
			$('.start-date-visible').text(dateText);
			$('#end-date').val('');
			$('.end-date-visible').text('');
			$(this).datepicker('option', dateText);
		} else {
			if (new Date(dateText) < startDate) {
				var sDate = $('#start-date').val();
				$('.start-date-visible').text(dateText);
				$('#start-date').val(dateText);
				$(this).datepicker('option', null);
				$('.end-date-visible').text(sDate);
				$('#end-date').val(sDate);

			} else {
				$('.end-date-visible').text(dateText);
				$('#end-date').val(dateText);
				$(this).datepicker('option', null);
			}
		}
}
}); 
// start date on default
$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
  6 * 24 * 60 * 60 * 1000)));
$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
  6 * 24 * 60 * 60 * 1000)));
＆＃13; 
td.ui-state-selected-range:first-child a {
    border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
    border-radius: 0 20px 20px 0;
}
.ui-red-start a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
    content: '';
    right: -1px;
    left: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-right: none;
    background-color: #f8c3b1;
    z-index: -1;
}
.ui-red-end a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
    content: '';
    left: -1px;
    right: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-left: none;
    background-color: #f8c3b1;
    z-index: -1;
}

.ui-state-selected-range .ui-state-default {
    border: 1px solid #f29676 !important;
    border-left: none !important;
    border-right: none !important;
    background: #f8c3b1 !important;
    box-sizing: border-box;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<span class="start-date-visible"></span> 
<span class="end-date-visible"></span>
<div id="datepicker"></div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

我认为Jquery-ui-calendar中没有默认选项，但您可以像下面的示例一样进行自定义，

这里我使用moment.js设置顶部按钮，然后根据之前选择的值单击该增量或减少值。

见下面的工作代码： - 

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

var firstMonth = moment(new Date()).month();

function setButton() {
  for (var i = 0; i < 12; i++) {
    var classs = "months active";
    if (i > 2) {
      classs = "months";
    }
    $("#list").append("<span class='" + classs + "'>" + monthNames[firstMonth++] + "</span>");
    if (firstMonth == 12) firstMonth = 0;
  }
}

setButton();

$(document).on("click", ".ui-datepicker-next", function() {
  $(".months").remove();
  firstMonth += 1;
  if (firstMonth > 11) {
    firstMonth = 0;
  }
  setButton();
});


$(document).on("click", ".ui-datepicker-prev", function() {
  $(".months").remove();

  firstMonth -= 1;
  if (firstMonth == -1) {
    firstMonth = 11;
  }
  setButton();
});

$(document).on("click", ".months:not(.active)", function() {
  $(".ui-datepicker-next").trigger('click');
})

$("#datepicker").datepicker({
  numberOfMonths: 3,
  showButtonPanel: false,
  dateFormat: 'dd.mm.yy',
  minDate: 0,
  maxDate: new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000),
  beforeShowDay: function(date) {
    var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
    var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
    if (startDate && endDate && startDate - endDate) {
      if (endDate <= date && date <= startDate) {
        if (startDate && date && (startDate.getTime() === date.getTime())) {
          // console.log('from end to start - backward - red-start ');
          return [true, 'ui-red-end', ''];
        }
        if (endDate && date && (endDate.getTime() === date.getTime())) {
          //    console.log('from end to start - backward - red-end ');
          return [true, 'ui-red-start', ''];
        }
        //  console.log('from end to start - backward');
        return [true, 'ui-state-selected-range', ''];
      }
    }
    if (startDate <= date && date <= endDate) {
      //console.log('from start to end - forward');
      if (startDate && date && (endDate.getTime() === date.getTime())) {
        // console.log('from start to end - forward - red-end');
        return [true, 'ui-red-end', ''];
      }
      if (endDate && date && (startDate.getTime() === date.getTime())) {
        //  console.log('from start to end - forward - red-start');
        return [true, 'ui-red-start', ''];
      }
    }
    if (startDate <= date && date <= endDate) {
      //    console.log('from start to end');
      return [true, 'ui-state-selected-range', ''];
    }
    return [true, '', ''];
  },
  onSelect: function(dateText, inst) {
    var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
    var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
    if (!startDate || endDate) {
      $('#start-date').val(dateText);
      $('.start-date-visible').text(dateText);
      $('#end-date').val('');
      $('.end-date-visible').text('');
      $(this).datepicker('option', dateText);
    } else {
      if (new Date(dateText) < startDate) {
        var sDate = $('#start-date').val();
        $('.start-date-visible').text(dateText);
        $('#start-date').val(dateText);
        $(this).datepicker('option', null);
        $('.end-date-visible').text(sDate);
        $('#end-date').val(sDate);

      } else {
        $('.end-date-visible').text(dateText);
        $('#end-date').val(dateText);
        $(this).datepicker('option', null);
      }
    }
  }
});
// start date on default
$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
  6 * 24 * 60 * 60 * 1000)));
$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
  6 * 24 * 60 * 60 * 1000)));
td.ui-state-selected-range:first-child a {
  border-radius: 20px 0 0 20px;
}

td.ui-state-selected-range:last-child a {
  border-radius: 0 20px 20px 0;
}

.ui-red-start a {
  position: relative;
  background-color: #F29676;
  border-radius: 20px;
  border: 1px solid #f29676 !important;
}

.ui-red-start a:before {
  content: '';
  right: -1px;
  left: 50%;
  top: -1px;
  bottom: -1px;
  position: absolute;
  border: 1px solid #f29676;
  border-right: none;
  background-color: #f8c3b1;
  z-index: -1;
}

.ui-red-end a {
  position: relative;
  background-color: #F29676;
  border-radius: 20px;
  border: 1px solid #f29676 !important;
}

.ui-red-end a:before {
  content: '';
  left: -1px;
  right: 50%;
  top: -1px;
  bottom: -1px;
  position: absolute;
  border: 1px solid #f29676;
  border-left: none;
  background-color: #f8c3b1;
  z-index: -1;
}

.ui-state-selected-range .ui-state-default {
  border: 1px solid #f29676 !important;
  border-left: none !important;
  border-right: none !important;
  background: #f8c3b1 !important;
  box-sizing: border-box;
}

.months {
  padding: 10px;
  background: #f1f1f1;
}

.months.active {
  background: #ffc2c2;
}

.months:hover {
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<span class="start-date-visible"></span>
<span class="end-date-visible"></span>
<div id="list">
</div>
<div id="datepicker"></div>

答案 1 :(得分：2)

希望这有帮助

在选择月份时，使用destroy()在datepicker上设置月份。

$("#datepicker").datepicker("destroy");

然后重新初始化通过所选月份的datepicker。

var today=new Date();
var newDate;
setCalender(today.getMonth());
var today=$("#datepicker").datepicker("getDate");
var todayMonth=today.getMonth();
setMonth(todayMonth);
clickMonth();
function setCalender(defaultMonth){
$("#datepicker").datepicker("destroy");
if(today.getMonth()==defaultMonth){
newDate=new Date(today.getFullYear(),today.getMonth(),today.getDate());
}
else if(today.getMonth()>defaultMonth){
newDate=new Date(today.getFullYear()+1,defaultMonth,today.getDate());
}
else{
newDate=new Date(today.getFullYear(),defaultMonth,today.getDate());
}
$("#datepicker").datepicker({
        numberOfMonths: 3,
        showButtonPanel: false,
        dateFormat: 'dd.mm.yy',
        defaultDate: newDate,
        minDate: 0,
        maxDate: new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000),
        beforeShowDay: function(date) {
        var dates=new Date();

            var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
            var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
            if (startDate && endDate && startDate - endDate) {
                if (endDate <= date && date <= startDate) {
                    if (startDate && date && (startDate.getTime() === date.getTime())) {
                        return [true, 'ui-red-end', ''];
                    }
                    if (endDate && date && (endDate.getTime() === date.getTime())) {
                        return [true, 'ui-red-start', ''];
                    }
                    return [true, 'ui-state-selected-range', ''];
                }
            }

            if (startDate <= date && date <= endDate) {
                if (startDate && date && (endDate.getTime() === date.getTime())) {
                    return [true, 'ui-red-end', ''];
                }
                if (endDate && date && (startDate.getTime() === date.getTime())) {
                    return [true, 'ui-red-start', ''];
                }
            }

            if (startDate <= date && date <= endDate) {
                return [true, 'ui-state-selected-range', ''];
            }

            return [true, '', ''];
        },
        onSelect: function(dateText, inst) {
            var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
            var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());

            if (!startDate || endDate) {
                $('#start-date').val(dateText);
                $('.start-date-visible').text(dateText);
                $('#end-date').val('');
                $('.end-date-visible').text('');
                $(this).datepicker('option', dateText);
            } else {
                if (new Date(dateText) < startDate) {
                    var sDate = $('#start-date').val();
                    $('.start-date-visible').text(dateText);
                    $('#start-date').val(dateText);
                    $(this).datepicker('option', null);
                    $('.end-date-visible').text(sDate);
                    $('#end-date').val(sDate);

                } else {
                    $('.end-date-visible').text(dateText);
                    $('#end-date').val(dateText);
                    $(this).datepicker('option', null);
                }
            }
        }
    }); 
    // start date on default
    $('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
    $('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
    // end date on default
    $('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
      6 * 24 * 60 * 60 * 1000)));
    $('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
      6 * 24 * 60 * 60 * 1000)));
}     
function setMonth(todayMonth){
$(".months").empty();
var month=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var after=[];
var before=[];
$.each(month,function(i,item){
	if(i>=todayMonth){
		before.push("<label data-attr='"+i+"'>"+month[i]+"</label>");
	}
	else{
		after.push("<label data-attr='"+i+"'>"+month[i]+"</label>");
	}
});
$.each(before,function(i,item){
	$(".months").append(before[i]);
});
$.each(after,function(i,item){
	$(".months").append(after[i]);
});
for(var j=0;j<3;j++){
	$(".months").find("label").eq(j).addClass("active");
}
}
function clickMonth(){
$(document).on("click","label",function(){
	var index=$(this).attr("data-attr");
	setMonth(index);
setCalender(index);
});
}
td.ui-state-selected-range:first-child a {
    border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
    border-radius: 0 20px 20px 0;
}
.ui-red-start a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
    content: '';
    right: -1px;
    left: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-right: none;
    background-color: #f8c3b1;
    z-index: -1;
}
.ui-red-end a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
    content: '';
    left: -1px;
    right: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-left: none;
    background-color: #f8c3b1;
    z-index: -1;
}

.ui-state-selected-range .ui-state-default {
    border: 1px solid #f29676 !important;
    border-left: none !important;
    border-right: none !important;
    background: #f8c3b1 !important;
    box-sizing: border-box;
}
label.active{
  font-weight:bold;
  background-color: #2795ee;
}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{
  display:none;
}
label.active:first-child {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
label.active:nth-child(3n) {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.months>label {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<span class="start-date-visible"></span> 
<span class="end-date-visible"></span>
<div class="months">
</div>
<div id="datepicker"></div>

相关问题
最新问题