javascript - Is it possible to convert select dropdown into horizontal months list in jQuery UI Datepicker? -
i'm building calendar based on jquery ui datepicker possibility choose date range 3 months displayed @ once. looks on screenshot: 
so need add block above calendar 12 horizontally positioned months starting current month. think need convert default select dropdown months horizontal list, due little experience javascript wasn't able bring work of similar examples internet.
when choose month in block should switch calendar 3 chosen months. hope able suggest me solution.
here current code:
$("#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 start - backward - red-start '); return [true, 'ui-red-end', '']; } if (enddate && date && (enddate.gettime() === date.gettime())) { console.log('from end start - backward - red-end '); return [true, 'ui-red-start', '']; } console.log('from end start - backward'); return [true, 'ui-state-selected-range', '']; } } if (startdate <= date && date <= enddate) { console.log('from start end - forward'); if (startdate && date && (enddate.gettime() === date.gettime())) { console.log('from start end - forward - red-end'); return [true, 'ui-red-end', '']; } if (enddate && date && (startdate.gettime() === date.gettime())) { console.log('from start end - forward - red-start'); return [true, 'ui-red-start', '']; } } if (startdate <= date && date <= enddate) { console.log('from start 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 { border-radius: 20px 0 0 20px; } td.ui-state-selected-range:last-child { border-radius: 0 20px 20px 0; } .ui-red-start { 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 { 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; }<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>
hope helps
use destroy() set month on datepicker when choose month.
$("#datepicker").datepicker("destroy");
then reinitialize datepicker passing selected month.
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 { border-radius: 20px 0 0 20px; } td.ui-state-selected-range:last-child { border-radius: 0 20px 20px 0; } .ui-red-start { 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 { 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>
Comments
Post a Comment