javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
How to fix JQuery Datepicker dateformat?
I already asked one question about datepicker yesterday, but now I have faced a new problem that I was not able to fix by myself. I'm using JQuery Datepicker to make a calendar where I can choose a date range. When I'm trying to change dateformat from default (which is mm/dd/yy) to dd.mm.yy it fails with error and stop working when I'm trying to select any date. Also with default dateformat doesn't work my code to have a default selected dates on load.
This is my code with current datepicker settings (it makes possible to choose date range and style it with additional classes, also it places dates from and to into hidden inputs and visible div's), with full styling it looks like on screenshot:
datepicker range work:
Hope you will be able to help me with this case!
// This code doesn't work with default dateformat
// 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)));
// jquery datepicker settings
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
minDate: 0,
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
if (date1 && date && (date1.getTime() == date.getTime())) {
return [true, 'ui-red-start', ''];
}
if (date2 && date && (date2.getTime() == date.getTime())) {
return [true, 'ui-red-end', ''];
}
if (date >= date1 && date <= date2) {
return [true, 'ui-state-selected-range', ''];
}
return [true, '', ''];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
if (!date1 || date2) {
$('#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) < date1) {
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);
}
}
}
});
});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://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>Solution
// This code doesn't work with default dateformat
// 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)));
// jquery datepicker settings
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
minDate: 0,
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
// var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
if (date1 && date && (date1.getTime() == date.getTime())) {
return [true, 'ui-red-start', ''];
}
if (date2 && date && (date2.getTime() == date.getTime())) {
return [true, 'ui-red-end', ''];
}
//change here for selection
if(date1 && date2 && date1-date2){
if (date2<=date && date<=date1) {
return [true, 'ui-state-selected-range', ''];
}
}
else if(date1 && date2 && date2-date1){
if (date2<=date && date<=date1) {
return [true, 'ui-state-selected-range', ''];
}
}
if (date1<=date && date<=date2) {
return [true, 'ui-state-selected-range', ''];
}
return [true, '', ''];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
if (!date1 || date2) {
$('#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) < date1) {
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);
}
}
}
});
});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://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>Use dateFormat: 'dd/mm/yy', and while parsing the date use same format to parse it.
- 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?