javascriptjquerydatepickerjquery-ui-datepickeruidatepicker
Is it possible to convert select dropdown into horizontal months list in jQuery UI Datepicker?
I'm building a calendar based on jQuery UI Datepicker with a possibility to choose date range with 3 months displayed at once. Now it looks like on screenshot:
So I need to add a block above this calendar with 12 horizontally positioned months starting from current month. I think I need to convert default select dropdown with months to this horizontal list, but due to my little experience with JavaScript I wasn't able to even bring it to work with help of similar examples from internet.
When you choose a month in this block it should switch calendar to 3 chosen months. Hope you will be able to suggest me a solution.
Here is my 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 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;
}<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>Solution
Hope this helps
use destroy() to set month on datepicker when you choose a 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 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>- Apply :focus-visible when focusing element programatically
- Set the background color of the entire webpage (the browser's window)
- Javascript onload and onunload
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to auto-reload files in Node.js?
- How to specify an array of objects as a parameter or return value in JSDoc?
- Initializing an Array with a Single Value
- How to recursively read local files and directories in web browser using File System Access API
- Short circuit Array.forEach like calling break
- encrypt to multiple public keys with RSA using Webcrypto
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- Binary Tree Level Order Traversal using Javascript
- How to wait until an element exists?
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Use JavaScript Code to run Puppeteer from Laravel Controller
- Displaying the number of rows in footer of webix grid
- Javascript Memoization Explanation?
- Resize image with javascript canvas (smoothly)
- Keyboard shortcut to extract local variable in JS/TS in Visual Studio Code
- NextJS 15 loading.tsx not showing
- How to create a react native ios share extension app
- Alternative or polyfill for Array.from on the Internet Explorer
- Mocha and the this context
- How to define an array with conditional elements in react
- Firestore orderBy Timestamp DESC
- changing element in ngOnInit not working when changing route, but is able to access element
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- How to set onClick with JavaScript?