How to set 2 functions with BeforeShowDay on jQuery Datepicker? - javascript

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/

Related

how to remove the leading zeros in date format as string

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);

jQuery UI DatePicker - only show 3 days of entire year

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/

JavaScript switch statement confusion

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());

Converting the code below to display the date in european format

the IsDateValid function below validates date in an american format.What do i change to convert it to validate the date in a European format. when the validate works a user is able to enter the date by simply entering a + or - sign depending on what they want i.e. a past date, or a future date.
function IsLeapYear(year) {
//Convert from string to number
year = year - 0;
if ((year/4) != Math.floor(year/4)) return false;
if ((year/100) != Math.floor(year/100)) return true;
if ((year/400) != Math.floor(year/400)) return false;
return true;
} //function IsLeapYear...
function countChar(str, daChar) {
//See how many of 'dachar' are in 'str' and return as daCount
var daCount=0;
for (i = 0; i < str.length; i++) {
if (str.charAt(i) == daChar)
//increment count each time we find daChar in str
daCount++;
}
return daCount;
} //function countChar...
function IsDateValid(dateField, noDateRqrd) {
//If no date is required and they didn't enter one, then go back
if (((typeof noDateRqrd != "undefined") && (dateField.value.length == 0))||dateField.value.length == 0)
return null;
//We're going to check this date so go on
var GoodLength = false;
var msg='';
var daysOfMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var daysOfMonthLY = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
//Make sure they have the right number of '/'
var cCount=countChar(dateField.value,'/');
//force a date value
if (dateField.value.length >= 3) {
//alert('cc: ' + cCount + 'fl: ' + dateField.value.length);
if ((cCount == 1) && (dateField.value.length >= 3) && (dateField.value.length <= 5))
GoodLength=true;
else if ((cCount == 2) && (dateField.value.length >= 4) && (dateField.value.length <= 10))
GoodLength=true;
}
//If the length is good, then let's check the contents of the dateField
if (GoodLength == true) {
var firstslash=dateField.value.indexOf('/')+1; //must add 1 to get real position
var lastslash=dateField.value.lastIndexOf('/')+1;
/****************************
Note: substr is not included in CFStudio so 'substr' will not be bolded & blue
*****************************/
var month=dateField.value.substr(0,firstslash-1);
if ((!isNaN(month)) && (month < 13)){
if (firstslash != lastslash) {
//alert(dateField.value);
var day=dateField.value.substr(firstslash,lastslash-firstslash-1); //lastslash-firstslash+1
//We only need to tell it where to cut off the first char
var year=dateField.value.substr(lastslash);
//Access dates can range from 100 to 9999.
//SQL Server dates can range from 1753 to 9999.
//Since this code can run for either db, we'll use the more restrivtive date of 1753.
//The length test will catch any date > 9999.
if (!isNaN(day)&&!isNaN(year)&&(year.length < 5)){
//If there isn't a year value, then put in the current year
if (year.length == 0) {
//There is no year so we only need to get day
var day=dateField.value.substr(firstslash,lastslash-firstslash-1);
//Since they didn't enter a year, we'll use the current year
var now = new Date();
year=now.getFullYear();
dateField.value = month + "/" + day + "/" + year;
} else if ((year.length == 1) || (year.length == 2)) {
var tmpDate = new Date(dateField.value);
//Programmer's Note: entered value of "00" would be return as "1900" by getFullYear
tmpDate_yyyy = tmpDate.getFullYear()-1900; //Get 4 dig date and reindex without centuary
//alert('tmpDate_yyyy: ' + tmpDate_yyyy);
if (tmpDate_yyyy < 100) { //If less than 100, then we're in 20th centuary
if (tmpDate_yyyy < 60) //do 00 to 59 as 20xx
tmpDate.setFullYear(2000 + tmpDate_yyyy); //reset year to 21st centuary
else //do 60 to 99 as 19xx
tmpDate.setFullYear(1900 + tmpDate_yyyy); //reset year to 20th centuary
//Have to do it the hard way or we'll also get day, time, etc. which we don't want here
//getMonth is zero based so it returns a number one less that we want
}
dateField.value = tmpDate.getMonth()+1 + "/" + tmpDate.getDate() + "/" + tmpDate.getFullYear();
} else if ((year.length == 4)&&(year > 1752)) {
dateField.value = day + "/" + Month + "/" + year;
} else {
msg= 'The date you entered is not valid: ' + dateField.value + '.';
}//if
} else {
msg= 'The date you entered is not valid: ' + dateField.value + '.';
} //if
} else {
//There is no year so we only need to get day
var day=dateField.value.substr(firstslash);
if (!isNaN(day)) {
//Since they didn't enter a year, we'll use the current year
var now = new Date();
var year=now.getFullYear();
dateField.value = month + "/" + day + "/" + year;
} else {
msg= 'The day you entered is not valid: ' + dateField.value + '.';
} //if
}
//alert('m: ' + month + ' d: ' + day + ' y:' + year);
if ((day==0)||(IsLeapYear(year) && day > daysOfMonthLY[month-1])||(!IsLeapYear(year) && day > daysOfMonth[month-1]))
msg= 'The date you entered is not valid: ' + dateField.value + '.';
} else {
msg='The month you entered is not valid: ' + month + '.';
}
} else {
if (dateField.value.length == 0) {
msg= 'You must enter enter a valid Date.';
} else if ((dateField.value.toLowerCase() == 'today')||(dateField.value.toLowerCase() == 'now')) {
var now = new Date();
var day=now.getDate();
var month=now.getMonth()+1; //Have to add 1 to get correct month
var year=now.getFullYear();
dateField.value = month + "/" + day + "/" + year;
} else if ((dateField.value.indexOf('+') == 0)||(dateField.value.indexOf('-') == 0)) {
//alert('in: ' + dateField.value + ', NaN: ' + isNaN(dateField.value));
if (!isNaN(dateField.value)) {
var now = new Date();
var nowMS = now.getTime(); //Get the current time in milliseconds
//Add the number of milliseconds in a day times the number of days requested
//Use the Math.floor to make sure we only get whole days in case they add a decimal value
now.setTime(nowMS + Math.floor((dateField.value * 1000*60*60*24)));
var day=now.getDate();
var month=now.getMonth()+1; //Have to add 1 to get correct month
var year=now.getFullYear();
dateField.value = month + "/" + day + "/" + year;
} else
msg= 'The proper format, +#, or -#, with no spaces in between: e.g., "+6", or "-2". You entered: "' + dateField.value + '".';
} else
msg= '146: The date you entered is not valid: "' + dateField.value + '".';
}
if(msg.length > 0) {
if (typeof noDateRqrd == 'undefined') {
var lastLine="Select 'OK' to re-enter value, or 'Cancel' to enter the current date.\n\n"
} else {
var lastLine="Select 'OK' to re-enter value, or 'Cancel' to clear the date.\n\n"
}
var conmsg ="\n\n____________________________________________________\n\n" +
msg +
"\n\n____________________________________________________\n\n" +
"A valid date must contain at least one forward slash '/' as well as a day and a month.\n" +
"If you leave the year blank, then the current year will be inserted.\n\n" +
"The allowable date range is from 1/1/1753 to 12/31/9999.\n\n" +
lastLine
if (confirm(conmsg))
dateField.focus();
else {
if (typeof noDateRqrd == 'undefined') {
//get the current time
var Now=new Date();
dateField.value=Now.getMonth()+1 + "/" + Now.getDate() + "/" + Now.getFullYear();
} else {
dateField.value="";
}
}
return false;
} else
return true;
} //function IsDateValid

Date updated on each click

In my app i want to navigate through certain dates. On first click i get the date i need, but on second click it stays the same.
var getDate = function() {
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var yesterday = d.getDate()-1;
var tomorrow = d.getDate()+1;
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
$('#yesterday, #tomorrow').click(function () {
if (this.id === 'yesterday') {
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + yesterday;
$("#today_date").text(output);
}
else if (this.id === 'tomorrow') {
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + tomorrow;
$("#today_date").text(output);
}
});
$("#today_date").text(output);
};
jsfiddle example here http://jsfiddle.net/7LXPq/800/
Every time you click on yesterday and tomorrow you need to update your current d date. Otherwise you are always stuck in today date.
Trying to keep as much as your original code you can refactor it like this:
var getDate = function() {
var d = new Date();
var formatDate = function () {
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
return output;
};
$('#yesterday, #tomorrow').click(function () {
d = new Date(d);
if (this.id === 'yesterday') {
d.setDate(d.getDate() - 1);
}
else if (this.id === 'tomorrow') {
d.setDate(d.getDate() + 1);
}
$("#today_date").text(formatDate());
});
$("#today_date").text(formatDate());
};
See demo
You can use this code:
var getDate = function() {
var d = new Date();
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$('#yesterday, #tomorrow').click(function () {
if (this.id === 'yesterday') {
d.setDate(d.getDate()-1);
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$("#today_date").text(output);
}
else if (this.id === 'tomorrow') {
d.setDate(d.getDate()+1);
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$("#today_date").text(output);
}
});
$("#today_date").text(output);
};
if you need the current date to be kept, you can just make a copy of the d variable before using it

Categories