I have a specific need in my project where I should enable only 1st and the 15th of every month in the jquery date picker. I have seen several solutions that is based on an array of dates, but that is not going to work for me. Is there a way a pattern can be applied?
#mtndesign - For your response/question on why I cannot use an array:
The datepicker should always (all past, current and future months & years) show only 1 or 15. How many dates I can keep in the array? How do I create array by the user behavior for the user selected month? I felt that it will be complicated if I start creating an array
I guess you want to accomplish something like this:
function isAvailable(date) {
var dt = date.getDate();
if (dt == 1 || dt == 15) {
return [true,"",""];
} else {
return [false,"",""];
}
}
$('#some_div').datepicker({ beforeShowDay: isAvailable });
A more general solution would be:
var dates_avail = [1, 15, 23, 27];
function isAvailable(date) {
var dt = date.getDate();
if (dates_avail.indexOf(dt) != -1) {
return [true,"",""];
} else {
return [false,"",""];
}
}
$('#some_div').datepicker({ beforeShowDay: isAvailable });
Or to check specific dates of specific years:
var dates_avail = ["1/1/2016", "21/4/2016", "19/3/2016"];
function isAvailable(date) {
var dt = date.getDate();
dt += "/" + (date.getMonth()+1);
dt += "/" + date.getFullYear();
if (dates_avail.indexOf(dt) != -1) {
return [true,"",""];
} else {
return [false,"",""];
}
}
$('#some_div').datepicker({ beforeShowDay: isAvailable });
I want to use this function, is this format correct please?
<script type="text/javascript">
function isAvailable(date) {
var dt = date.getDate();
if (dt == 1 || dt == 16) {
return [true, "", ""];
} else {
return [false, "", ""];
}
}
$('#date2').datepicker({ beforeShowDay: isAvailable });
</script>
Related
I have been trying to search for a solution to my Jquery ui datepicker problem and I'm having no luck. Here's what I'm trying to do...
I have an application where i'm doing some complex PHP to return a JSON array of dates that I want BLOCKED out of the Jquery UI Datepicker. I am returning this array:
["2013-03-14","2013-03-15","2013-03-16"]
Is there not a simple way to simply say: block these dates from the datepicker?
I've read the UI documentation and I see nothing that helps me. Anyone have any ideas?
You can use beforeShowDay to do this
The following example disables dates 14 March 2013 thru 16 March 2013
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
Demo: Fiddle
IE 8 doesn't have indexOf function, so I used jQuery inArray instead.
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
If you also want to block Sundays (or other days) as well as the array of dates, I use this code:
jQuery(function($){
var disabledDays = [
"27-4-2016", "25-12-2016", "26-12-2016",
"4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
];
//replace these with the id's of your datepickers
$("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
beforeShowDay: function(date){
var day = date.getDay();
var string = jQuery.datepicker.formatDate('d-m-yy', date);
var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 disables all Sundays
return [day != 0 && !isDisabled];
}
});
});
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
beforeShowDate didn't work for me, so I went ahead and developed my own solution:
$('#embeded_calendar').datepicker({
minDate: date,
localToday:datePlusOne,
changeDate: true,
changeMonth: true,
changeYear: true,
yearRange: "-120:+1",
onSelect: function(selectedDateFormatted){
var selectedDate = $("#embeded_calendar").datepicker('getDate');
deactivateDates(selectedDate);
}
});
var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];
deactivateDates(new Date());
function deactivateDates(selectedDate){
setTimeout(function(){
var thisMonthExcludedDates = thisMonthDates(selectedDate);
thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
});
excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
}, 10);
}
function thisMonthDates(date){
return $.grep( excludedDates, function( n){
var dateParts = n.split("-");
return dateParts[0] == date.getMonth() + 1 && dateParts[2] == date.getYear() + 1900;
});
}
function getDaysfromDate(datesArray){
return $.map( datesArray, function( n){
return n.split("-")[1];
});
}
For DD-MM-YY use this code:
var array = ["03-03-2017', '03-10-2017', '03-25-2017"]
$('#datepicker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
If you want to disable particular date(s) in jquery datepicker then here is the simple demo for you.
<script type="text/javascript">
var arrDisabledDates = {};
arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy",
beforeShowDay: function (date) {
var day = date.getDay(),
bDisable = arrDisabledDates[date];
if (bDisable)
return [false, "", ""]
}
});
</script>
In short, I want the datepicker to first disable all sundays - I use this code:
jQuery("#datepicker").datepicker({
beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0) {
return [false, "busy"]
} else {
return [true, "free"]
}
}
});
It works. But then I also want to disable specific dates within a range that is stored in an array:
jQuery("#datepicker").datepicker({
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
});
This also works and disables the days that I want.
Problem: Both codes works seperately - how can I combine them so both sundays are disabled and my custom dates from the array?
Hope this will help you. Try following code:
$(function(){
$('#thedate').datepicker({
beforeShowDay: function(date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
var day = date.getDay();
if (day == 0 || dateRange.indexOf(dateString) != -1) {
return [false, "busy"]
} else {
return [true, "free"]
}
}
});
});
Here is working jsfiddle.
I have been trying to search for a solution to my Jquery ui datepicker problem and I'm having no luck. Here's what I'm trying to do...
I have an application where i'm doing some complex PHP to return a JSON array of dates that I want BLOCKED out of the Jquery UI Datepicker. I am returning this array:
["2013-03-14","2013-03-15","2013-03-16"]
Is there not a simple way to simply say: block these dates from the datepicker?
I've read the UI documentation and I see nothing that helps me. Anyone have any ideas?
You can use beforeShowDay to do this
The following example disables dates 14 March 2013 thru 16 March 2013
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
Demo: Fiddle
IE 8 doesn't have indexOf function, so I used jQuery inArray instead.
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
If you also want to block Sundays (or other days) as well as the array of dates, I use this code:
jQuery(function($){
var disabledDays = [
"27-4-2016", "25-12-2016", "26-12-2016",
"4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
];
//replace these with the id's of your datepickers
$("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
beforeShowDay: function(date){
var day = date.getDay();
var string = jQuery.datepicker.formatDate('d-m-yy', date);
var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 disables all Sundays
return [day != 0 && !isDisabled];
}
});
});
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
beforeShowDate didn't work for me, so I went ahead and developed my own solution:
$('#embeded_calendar').datepicker({
minDate: date,
localToday:datePlusOne,
changeDate: true,
changeMonth: true,
changeYear: true,
yearRange: "-120:+1",
onSelect: function(selectedDateFormatted){
var selectedDate = $("#embeded_calendar").datepicker('getDate');
deactivateDates(selectedDate);
}
});
var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];
deactivateDates(new Date());
function deactivateDates(selectedDate){
setTimeout(function(){
var thisMonthExcludedDates = thisMonthDates(selectedDate);
thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
});
excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
}, 10);
}
function thisMonthDates(date){
return $.grep( excludedDates, function( n){
var dateParts = n.split("-");
return dateParts[0] == date.getMonth() + 1 && dateParts[2] == date.getYear() + 1900;
});
}
function getDaysfromDate(datesArray){
return $.map( datesArray, function( n){
return n.split("-")[1];
});
}
For DD-MM-YY use this code:
var array = ["03-03-2017', '03-10-2017', '03-25-2017"]
$('#datepicker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
If you want to disable particular date(s) in jquery datepicker then here is the simple demo for you.
<script type="text/javascript">
var arrDisabledDates = {};
arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy",
beforeShowDay: function (date) {
var day = date.getDay(),
bDisable = arrDisabledDates[date];
if (bDisable)
return [false, "", ""]
}
});
</script>
I'm using Dynarch calendar in one of my Magento module and i want to disable some specific dates in an array like below.
var array = ["2014-01-14","2014-01-15","2011-01-16"]
I'm currently using this code and this disables all the days except sundays. I tried in many ways with JQuery methods and could not be success.
disableFunc : function(date)
{
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth();
var d = calendar.date.getDate();
var day_off_array = dayoff.split(",") ;
//document.write(day_off_array);
currentTime = new Date();
var d1=currentTime.getDate();
var m1=currentTime.getMonth();
var y1=currentTime.getFullYear();
if (date.getDay() != 0) {
return true; // true says "disable"
} else {
return false; // leave other dates enabled
}
if(y < y1)
{
return true;
}
else if(m1 > m && y==y1)
{
return true;
}
}
Is there a way to achieve this and any helps would be appreciated. Thanks.
See examples at http://www.dynarch.com/jscal/#sec8
The above calendar allows selection between 8 April and 25 December 2009.
Here's the code that we used:
Calendar.setup({
cont: "sample1",
min: 20090408,
max: 20091225
});
I was browsing through the net to find a javascript function
which can check whether the date entered by the user is current date or the future date but i didn't found a suitable answer so i made it myself.Wondering If this can be achieved by one line code.
function isfutureDate(value)
{
var now = new Date;
var target = new Date(value);
if (target.getFullYear() > now.getFullYear())
{
return true;
}
else if(target.getFullYear() == now.getFullYear())
{
if (target.getMonth() > now.getMonth()) {
return true;
}
else if(target.getMonth() == now.getMonth())
{
if (target.getDate() >= now.getDate()) {
return true;
}
else
{
return false
}
}
}
else{
return false;
}
}
You can compare two dates as if they were Integers:
var now = new Date();
if (before < now) {
// selected date is in the past
}
Just both of them must be Date.
First search in google leads to this: Check if date is in the past Javascript
However, if you love programming, here's a tip:
A date formatted like YYYY-MM-DD could be something like 28-12-2013.
And if we reverse the date, it is 2013-12-28.
We remove the colons, and we get 20131228.
We set an other date: 2013-11-27 which finally is 20131127.
We can perform a simple operation: 20131228 - 20131127
Enjoy.
here's a version that only compares the date and excludes the time.
Typescript
const inFuture = (date: Date) => {
return date.setHours(0,0,0,0) > new Date().setHours(0,0,0,0)
};
ES6
const inFuture = (date) => {
return date.setHours(0,0,0,0) > new Date().setHours(0,0,0,0)
};
try out this
function isFutureDate(idate){
var today = new Date().getTime(),
idate = idate.split("/");
idate = new Date(idate[2], idate[1] - 1, idate[0]).getTime();
return (today - idate) < 0 ? true : false;
}
Demo
console.log(isFutureDate("02/03/2016")); // true
console.log(isFutureDate("01/01/2016")); // false
ES6 version with tolerable future option.
I made this little function that allows for some wiggle room (incase data coming in is from a slightly fast clock for example).
It takes a Date object and toleranceMillis which is the number of seconds into the future that is acceptable (defaults to 0).
const isDistantFuture = (date, toleranceMillis = 0) => {
// number of milliseconds tolerance (i.e. 60000 == one minute)
return date.getTime() > Date.now() + toleranceMillis
}
try this
function IsFutureDate(dateVal) {
var Currentdate = new Date();
dateVal= dateVal.split("/");
var year = Currentdate.getFullYear();
if (year < dateVal[2]) {
return false;//future date
}
else {
return true; //past date
}
}
In my case, I used DD-MM-YYYY format dates to compare and it gives an error since the behaviour of "DD-MM-YYYY" is undefined. So I convert it to a compatible format and compare it. And also if you need to compare only the dates and not time, you need to set time parameters to zero.
var inputDateVal = "14-06-2021";
if (inputDateVal != null && inputDateVal != '') {
var dateArr = inputDateVal.split("-");
var inputDate = new Date('"' + dateArr[2] + "-" + dateArr[1] + "-" + dateArr[0] + '"').setHours(0, 0, 0, 0);
var toDay = new Date().setHours(0, 0, 0, 0);
if(inputDate > toDay){
console.log("Date is a future date");
}else if(inputDate== toDay){
console.log("Date is equal to today");
}else{
console.log("Date is a past date");
}
}
You can use moment.js library
let dateToBeCompared = "10/24/2021"; // "DD/MM/YYYY" format
// For past dates
moment(dateToBeCompared, "DD/MM/YYYY").isBefore(moment(new Date(), "DD/MM/YYYY"),
'day')
// For same dates
moment(dateToBeCompared, "DD/MM/YYYY").isSame(moment(new Date(), "DD/MM/YYYY"),
'day')
// For future dates
moment(dateToBeCompared, "DD/MM/YYYY").isAfter(moment(new Date(), "DD/MM/YYYY"),
'day');
There are other functions like also like isSameOrAfter() and isSameOrBefore()
Have a look at here