Disable dates and days of the week in ACF date picker - javascript

I have found lots of topics about the (jQuery) Datepicker but not the specific ACF way I am looking for.
The following is a perfectly working code to set max selected dates in the past and in the future within ACF but I need 2 more functions but can't figure out how to implement them.
How do I:
Disable specific future dates?
Disable specific week days (f.i. Sundays)?
within the example code below?
function yl_date_picker_customizations() {
?>
<script type="text/javascript">
(function($) {
// JS here
acf.add_filter('date_picker_args', function( args, $field ){
// do something to args
args['minDate'] = '0'; //For example, "+1m +7d" represents one month and seven days from today.
args['maxDate'] = '30';
return args;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'yl_date_picker_customizations');

Here's the working code :)
// Customization to reservation dates via datepicker
function yl_datepicker_customizations() {
?>
<script type="text/javascript">
(function($) {
var arrDisabledDates = {};
arrDisabledDates[new Date('06/19/2020')] = new Date('06/19/2020');
arrDisabledDates[new Date('06/30/2020')] = new Date('06/30/2020');
acf.add_filter('date_picker_args', function( args, $field ){
// do something to args
args['minDate'] = '0'; //For example, "+1m +7d" represents one month and seven days from today.
args['maxDate'] = '60';
args['beforeShowDay'] = function (date) {
var day = date.getDay(),
bDisable = arrDisabledDates[date];
if (bDisable) return [false, '', '']
else return [(day != 4) && (day != 2)]
}
return args;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'yl_datepicker_customizations');

Related

Disable custom dates in date range picker from code behind in ASP.Net

I Have code like this :
<script type="text/javascript">
var some_date_range = ['20-10-2017','24-10-2017','27-10-2017','28-10-2017','25-10-2017'];
$('#daterange').daterangepicker({
isInvalidDate: function (date) {
for (var ii = 0; ii < some_date_range.length; ii++) {
if (date.format('DD-MM-YYYY') == some_date_range[ii]) {
return true;
}
}
}
})
</script>
I want block custom date in date range picker, and usually i put variable into javascript and code worked, how if i set variable date from code behind using textbox or label in ASP.Net .
please your advice
This code will disable custom dates in date range picker.
var naArray = ["20170822", "20170823", "20170824", "20170825"];
function isDateAvailable(date){
return naArray.indexOf(date.format('YYYYMMDD')) > -1;
}
$('input[name="daterange"]').daterangepicker({
isInvalidDate: isDateAvailable
});
Okay... it's not entirely clear what you want here, but it sounds like you just want to know how to set the javascript array variable with ASP, in which case you would simply write:
var some_date_range = [<%= name_of_your_array_variable_from_asp %>];

hide javascript dates in table

i have a form where the previous dates from today must be hidden in the first date picker and the second date picker must not show dates previous to the first selected date.
Date picker one
Date picker two
The form is working for the first row but i can't get the code to work for the other rows that follow when i "add" a new row.
Can anyone assist me with this Please?
here is my current code :
$(document).ready(function(){
function updateMinimumEndDate ()
{
var minimum = $('.DepartDate input').val();
var minSplit = [];
minSplit = minimum.split("/");
var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
$('.ReturnDate input').attr('min',newMin);
}
$('.DepartDate input').change(updateMinimumEndDate);
});
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var minDate = (year +"-"+ month +"-"+ day);
$('.DepartDate input').attr('min',minDate);
});
});
The problem is with the line
$('.DepartDate input').change(updateMinimumEndDate);
This needs to be in docReady. It also needs to use the jQuery function .on so that it will be triggered for new rows as they are added. I haven't checked this:
$('.DepartDate input').on('change', 'AnchorSelector', function() {updateMinimumEndDate())};
where AnchorSelector is a location which contains your form.

fullcalendar rendering: getting the current cell day integer in JS and then use it as a array key

I'm trying to render the full calendar and I want each cell to be in a different color according to an array of mine that contains a color for each day of the given month.
I get this array in Jason.
eg "json_backgrundColor [1] ='red'"
(1 being the day date number of the month. possibale array key range 1-30/31).
here is an array in jason for e.g:
{"1":"green","2":"blue","3":"blue","4":"yellow","5":"yellow","6":"yellow","7":"yellow","8":"yellow","9":"blue","10":"blue","11":"yellow","12":"yellow","13":"yellow","14":"yellow","15":"yellow","16":"blue","17":"blue","18":"yellow","19":"yellow","20":"yellow","21":"yellow","22":"yellow","23":"blue","24":"green","25":"red","26":"red","27":"green","28":"green","29":"green","30":"green","31":"green"}
my first problem is that i cannot seem to get the number of the given cell day as an integer (1-31) in JS.
here is the code(php while echoing Js): `
for ($i = 1; $i <= 12; $i++) {
$month = $i - 1;
$json_array_for_fullCalendar[$i] = self::convert_events_to_json_for_full_calendar($fullCalendarMonth[$i],$_POST['display_Language']);
echo "<div id='calendar$i'></div>
<script>
var json = $json_array_for_fullCalendar[$i];
var JsMonth = $month;
var JsYear = $year;
var json_backgrundColor = $JsonMonthBackgroudCell[$i];
$('#calendar$i').fullCalendar({
var moment = $('#calendar$i').fullCalendar('getDate');
var cellDate = moment.format('d');
events: json,
fixedWeekCount: false,
defaultDate: new Date(JsYear, JsMonth, 1),
dayRender: function (date, cell) {
cell.css('background-color', json_backgrundColor[cellDate])
},
});
</script>"; }
This code does not even render the full calendar (and this is my seconed problem).
my seconed problem is that its hard to me to render the full calendar when im trying to get the array key in js variables.
e.g for seconed problem:
when im not using a variables and i use an integer insted :
dayRender: function (date, cell) {
cell.css('background-color', json_backgrundColor[1])
},
and when im droping this lines from the code:
var moment = $('#calendar$i').fullCalendar('getDate');
var cellDate = moment.format('d');
the full calendar is rendering without any problem.
I'm a bit new with communicating PHP and JS.. I tryed to find a solution for this on my own for a long time.
any suggestion?
thanks!
take a look here
http://jsfiddle.net/z8Jfx/7/
and proceed from there.
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
if(date > today && date <= end) {
cell.css("background-color", "yellow");
}
}
});

Display select option text date

I have a select option drop down that shows only Mondays (to select a particular week).
<select id="monday" name="monday">
<option value="7">
Mon 1/7/2013 (Week 02)
</option><option value="14">
Mon 1/14/2013 (Week 03)
</option>
// etc...
</select>
I would like to grab the option text (i.e. Mon 1/7/2013 (Week 02)) and use it to display that week's dates in a table:
<div id='mondaydate'>Mon 1/7/2013 (Week 02)</div> | <div id='tuesdaydate'>Tue 1/8/2013 (Week 02)</div> | <div id='wednesdaydate'>Wed 1/9/2013 (Week 02)</div>...
When the select option changes I would like the dates in the <div>'s to change as well. Right now the JavaScript I have (which isn't working) is:
<script type='text/javascript'>
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date("text");
document.getElementById("mondaydate").innerHTML = "mon.setDate(mon.getDate()+0)";
document.getElementById("tuesdaydate").innerHTML = "mon.setDate(mon.getDate()+1)";
document.getElementById("wednesdaydate").innerHTML = "mon.setDate(mon.getDate()+2)";
document.getElementById("thursdaydate").innerHTML = "mon.setDate(mon.getDate()+3)";
document.getElementById("fridaydate").innerHTML = "mon.setDate(mon.getDate()+4)";
document.getElementById("saturdaydate").innerHTML = "mon.setDate(mon.getDate()+5)";
document.getElementById("sundaydate").innerHTML = "mon.setDate(mon.getDate()+6)";
</script>
Can this be done, or am I spinning my wheels?
UPDATE - SOLUTION
As was suggested, I got a little quote happy, so I got rid of those. Also as suggested, the dates would need to be formatted as the first attempt only provided timestamps. Using this date format solution I was able to format the dates into something readable by humans.
Full working JavaScript code:
<script type='text/javascript'>
function formatDate(date, fmt) {
function pad(value) {
return (value.toString().length < 2) ? '0' + value : value;
}
return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
switch (fmtCode) {
case 'Y':
return date.getUTCFullYear();
case 'M':
return pad(date.getUTCMonth() + 1);
case 'd':
return pad(date.getUTCDate());
case 'H':
return pad(date.getUTCHours());
case 'm':
return pad(date.getUTCMinutes());
case 's':
return pad(date.getUTCSeconds());
default:
throw new Error('Unsupported format code: ' + fmtCode);
}
});
}
function changeDate()
{
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon = new Date(text);
document.getElementById("mondaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+0)), '%M/%d/%Y');
document.getElementById("tuesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("wednesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("thursdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("fridaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("saturdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("sundaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
}
</script>
Also, note that originally I was setting the dates incorrectly with Monday +0, Tuesday +1, Wednesday +2, etc. (didn't notice it as all I got were timestamps). This really seemed to be setting the date, so Monday and Tuesday displayed correctly, but then Wednesday was displaying Thursday's date, Thursday displayed Sunday's date, etc. incrementing each by +1 instead solved that problem.
Remove the quotes around your variables or else it'll just display what's in the quotes and not perform any logic:
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text); <--- No quotes around text variable
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0); <--- No quotes
//Same with everything below, stop with the quotes!
document.getElementById("tuesdaydate").innerHTML = mon.setDate(mon.getDate()+1);
document.getElementById("wednesdaydate").innerHTML = mon.setDate(mon.getDate()+2);
document.getElementById("thursdaydate").innerHTML = mon.setDate(mon.getDate()+3);
document.getElementById("fridaydate").innerHTML = mon.setDate(mon.getDate()+4);
document.getElementById("saturdaydate").innerHTML = mon.setDate(mon.getDate()+5);
document.getElementById("sundaydate").innerHTML = mon.setDate(mon.getDate()+6);
You have a lot of unnecessary quotes, which is screwing up your code.
Have a look at this :
JS :
$("#monday").click(function(){
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text);
console.log(mon);
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0);
});
Find the working fiddle here : http://jsfiddle.net/bnWRU/1/
tymeJV already answered, but I think you might have some trouble with date format in javascript.
I sugest this post: Javascript get date in format

Help with jquery datepicker calendar date disabling

I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.
You mean valueOf(), not getTime().

Categories