im using jquery calendar from here it basically change the background color of the disabled dates in red
<input id="iDate">
<script>
var unavailableDates = ["09-10-2018", "14-09-2018", "15-10-2018"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'd-m-yy',
beforeShowDay: unavailable
});
});
</script>
as you can see i have 3 disabled dates, the "09-10-2018" and "14-09-2018" does not disable in my calendar because of the leading zeros of day and month but when i try to remove the zeros of the day and month its working.
i also look in here but i dont undestand
by the way the unavailaDates are coming from database so its not hardcoded thats why it generate leading zeros in day and month.
i appreciate whoever help me.
im a beginner
sorry for bad english
The issue is that date.getDate() and date.getMonth() return integers, which cannot have leading zeros, therefore there will never be a match.
Simple fix, create a function:
function pad(num) {
var s = "" + num;
if ( num < 10 ) {
s = "0" + num;
}
return s;
}
Then do:
dmy = pad(date.getDate()) + "-" + pad(date.getMonth() + 1) +
"-" + date.getFullYear();
You can use padStart and compare both formats:
var unavailableDates = ["01-10-2018", "2-10-2018", "13-10-2018"];
function unavailable(date) {
var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
var dmy2 = ((date.getDate()+'').padStart(2,'0')) + "-" + (((date.getMonth() + 1)+'').padStart(2,'0')) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1 && $.inArray(dmy2, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: unavailable
});
});
.ui-datepicker td.ui-state-disabled>span{background:#c30;}
.ui-datepicker td.ui-state-disabled{opacity:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<input id="iDate">
I think #Bryanh maybe on to something.
But direct answer to your question is:
let d = '09-10-2018';
let newD = d.split('-').map(n=>{
return parseInt(n)
}).join('-')
console.log(newD);
Related
I'm wondering if it's possible to show only 3 days a year in the datepicker?
This is what I got so far:
JS:
var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +
date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$('#date').datepicker({ beforeShowDay: available });
css:
.ui-datepicker-unselectable {display: none;}
jsfiddle link
Dear you forgot defaultDate, please try this:
var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$('#date').datepicker({ beforeShowDay: available, defaultDate: "12/28/2017" });
Please use this fiddle http://jsfiddle.net/szYYY/50/
I would suggest you to remove the hardcoded date and make the code more generic:
JS:
var availableDates = ["28-12-2017", "29-12-2017", "30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "", "Available"];
} else {
return [false, "", "unAvailable"];
}
}
$('#date').datepicker({
beforeShowDay: available,
dateFormat: "dd-mm-yy",
minDate: availableDates[0],
maxDate: availableDates[2]
});
No CSS required.
Displaying the full month with disabled dates gives clarity to the user rather than hiding the dates.
Demo: http://jsfiddle.net/szYYY/52/
getDateRange = function () {
date = new Date();
var test;
selectedOption = $('#daterange').change().val()
console.log(selectedOption) // reusult 0
switch (selectedOption) {
case 0:
test = '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate()
break
}
return test
}
console.log($('#daterange').change().val()) // result 0
console.log(getDateRange()) // result "undefined". Why?
Why is the result of the switch statement always undefined?
Change your case statement to case '0' since val() returns a string.
Also: If you are not doing any other things after your switch statement except returning your test variable, you could also just return your value and get rid of var test.
getDateRange = function() {
date = new Date();
selectedOption = $('#daterange').change().val();
switch (selectedOption) {
case '0':
return '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate();
}
}
console.log(getDateRange());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="daterange" value="0" />
$('#daterange').change().val() returns a string, but in switch you compare with a number.
Also, in the current example, you don't need switch, because you have only one case:
getDateRange = function () {
var selectedOption = $('#daterange').change().val();
if (selectedOption === '0') {
return ...
}
}
I javascript your dataType should be tighly match with your comparision operatot, so compare it with ===
In this case type and data both will match together.
getDateRange = function() {
date = new Date();
selectedOption = $('#daterange').change().val();
switch (selectedOption) {
case '0':
return '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate();
}
}
console.log(getDateRange());
I want to have the dateformat in this format: 2015-08-04T00:00:00Z.
so first year, month, day.
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
onSelect: function (dateText, inst) {
var dt = $.datepicker.formatDate('yy-mm-dd', dateText, "getDate")
alert(dt);
var hallo = $("#form_inp1").val() + 'T00:00:00Z';
alert(dateText);
alert(hallo);
//$("#form_inp1").datepicker("getDate");
//alert($("#form_inp1").formatDate('yy-mm-dd', dateText, "getDate")
},
But If I do an alert(dateText) I see the format as: 4-8-2015 and it has to be: 2015-08-04.
Thank you
If I try it like this:
onSelect: function (dateText, inst) {
dateText = dateText.split("-");
dateText = new Date('' + dateText[2] + '-' + dateText[1] + '-' + dateText[0] + '');
alert(dateText);
}
I get invalid date
So this var hallo = $("#form_inp1").val() + 'T00:00:00Z';
returns: 4-8-2015T00:00:00Z . But it has to be:2015-08-04T00:00:00Z.
Thank you
Quick fix is to change the date format using plain Javascript. This can be achieved by following script.
dt= dt.split("-");
dt = new Date('' + dt[2] + '-' + dt[1] + '-' + dt[0] + '');
to add zero in case the day, month and year is below 10, use following method.
function AddTrailingZero(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
Let me know if you have any question related to the code snippet above.
I have a date picker and i need to set to functions to run on BeforeShowDay.
I can't work out how to run both functions names unavailable and disabledays
http://jsfiddle.net/rLnTQ/50/
Thanks in advance
Lee
How about combining them into one?
function disabledays(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == 0) {
return [false, "", "Unavailable"]
} else {
var day = date.getDay();
return [(day != 0 && day != 2)];
}
}
$('#txtDate').datepicker({
beforeShowDay: disabledays
})
http://jsfiddle.net/rLnTQ/104/
Or you can put one within the other:
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == 0) {
return [false, "", "Unavailable"];
} else {
return disabledays(date);
}
}
function disabledays(date) {
var day = date.getDay();
return [(day != 0 && day != 2)];
}
$('#txtDate').datepicker({
beforeShowDay: unavailable
})
http://jsfiddle.net/rLnTQ/118/
I apologise if this is a really basic question but I am using the following jquery plugin:
http://jonathanleighton.com/projects/date-input
I want to change the date from YYYY-MM-DD to DD/MM/YYYY using his suggestion under customisations. I tried to do the following which I thought would work but it completely breaks it:
$.extend(DateInput.DEFAULT_OPTS, {
stringToDate: function(string) {
var matches;
if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
return new Date(matches[1], matches[2] - 1, matches[3]);
} else {
return null;
};
},
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return date.dom + "/" + month + "/" + getFullYear();
}
});
It's the following line where it all goes wrong:
return date.dom + "/" + month + "/" + getFullYear();
Could anyone offer a suggestion as to what I'm doing wrong?
You should try using the jQuery UI datepicker. Very easy to format the date
http://jqueryui.com/demos/datepicker/
i don't think you need the "date" in date.dom:
try replacing this:
return date.dom + "/" + month + "/" + getFullYear();
with this:
return dom + "/" + month + "/" + getFullYear();