I currently have a WordPress site installed where users can book a tour of our facility (we are a university). I have used the ContactForm7 plugin to create a form within a page where visitors can enter their contact information and then can use a datepicker field to select the specific date that they want to take their tour on.
My question is (I've searched high and low for a solution to this but to no avail) is there a way that I can disable or block specific dates from being selected in this datepicker field in the form? For example, there are a number of days when tours are not available (i.e. holidays and other days when tour staff are not on campus) so I don't want these dates to be selectable.
Is there a way to do this within the plugin, or is there any other way I can do it, whether it's using a script or through another plugin?
My colleague showed me a site that uses a jQuery/JS datepicker field in their tour booking form (this is NOT a WordPress/ContactForm7 form however) and they are able to block specific dates when tours aren't available, so I'm assuming it should be possible...somehow.
Any help would be greatly appreciated! :)
EDIT:
I found the code below and the website sounds like it'll do exactly what I'm looking for (using a method similar to one of the answers below it looks like) but I can't really figure out how to add it to my site so that it works. I've added it in the header.php file of my theme, and I've set the id to "#DisabledDates" - which is what I've set the datepicker field id to on the form as well...but the dates that I set for the "unavailableDates" are still selectable...any ideas?
<?php if ($post->ID==16) { ?>
<script type="text/javascript">
var unavailableDates = ["9-5-2013", "10-5-2013", "11-5-2013", "12-5-2013", "13-5-2013", "14-5-2013", "15-5-2013", "16-5-2013", "17-5-2013", "18-5-2013", "19-5-2013", "20-5-2013", "21-5-2013", "22-5-2013", "23-5-2013", "24-5-2013"];
jQuery(function($){
$( "#DisabledDates" ).datepicker({
minDate: 5,
beforeShowDay: function(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
</script>
Here's where I found it (it looks like a plugin that existed to extend CF7 with a datepicker field before the datepicker was added to the plugin...but I'm assuming it should still work similarly?): https://github.com/relu/contact-form-7-datepicker/issues/37
You will have to access FTP to put a function somewhere in the CF7 files.
OR You can possibly find the class Wordpress uses and filter those dates out.
it can be done by two types
set mindate and maxdate
when you open the datepicker and change month/year it will fire an event beforeShowDay with each date on that month and year, and you can check for each date in that function with your date range array or object and return true or false. If false return that date will be deactive and on true that date will be active
Check out this link: http://jqueryui.com/demos/datepicker/#inline http://jqueryui.com/demos/datepicker/#min-max
The description says this: "Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D')"
Related
I have a input field which I want to fill with date and time in format yy-mm-dd hh-mm-ss, because I'm sending this information to my databases column with DATETIME (or similar) data type. I made this work with two inputs - one textfield I filled with datepicker() and other was <select> list with predefined values for time. Today I was coding another functionality in php and I didn`t like my situation with date and time, so I made javascript code like this:
<script type="text/javascript">
$(".datepicker").click(function(){
var a = "yy-mm-dd ";
var b = prompt("Ievadi laiku formātā hh-mm-ss", "00-00-00");
var c = a.concat(b);
$(".datepicker").datepicker({dateFormat: c});
});
</script>
So when I click on the input field I get a prompt where I type time and press enter. This is when I'd like to choose a date from the calendar but as datepicker actually works at the same time when prompt shows up (on click), then argument c doesn't exist at this time and calendar doesn't show up because dateFormat is invalid. If I click once again on the input field, I get another prompt and after the second prompt calendar shows up, but datepicker uses the format I was trying to set the first time not now. So if I entered "00-00-00" for the first time and "00-10-00" for the second, than after choosing the date I get "mydate 00-00-00" and not the actual time I entered this time. I've seen similar posts here but it didn't help me. There was a post of getting current time and appending to the date but I guess this is different. Should I use some other method to enter the time and then add it to date as I was trying to do it or is there a way to give my variable c a value before datepicker works? I`ll appreciate your suggestions.
<script type="text/javascript">
$(".datepicker").click(function(){
var a = "yy-mm-dd ";
var b = prompt("Ievadi laiku formātā hh-mm-ss", "00-00-00");
var c = a.concat(b);
if (c.length > 0){
$(".datepicker").datepicker({dateFormat: c});
}});
</script>
If statement solved this one. But it doesnt work every time. Ill check this tomorrow.
EDITED: this works - https://jsfiddle.net/gne64yd5/20/
I am following this Set multiple jQuery Datepickers' value based on one jQuery Datepicker's selected date which is already asked by me and also received answer as well.
I have following multiple dates on a page and change on first date picker will change values for other date pickers on the screen.
First date picker is one which value will changes values for other date pickers.
Note: Please note that I want to display Date Picker from Image and don't want to use input type as text
I want to know the best way to store this values to server. You can see my current code same as suggested in answer in above question.
$("#datepicker1, #datepicker2, #datepicker3, #datepicker4").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 1);
$("#datepicker2").datepicker("setDate", date2);
var date3 = new Date(date1.getTime());
date3.setDate(date3.getDate() + 2);
$("#datepicker3").datepicker("setDate", date3);
var date4 = new Date(date1.getTime());
date4.setDate(date4.getDate() + 3);
$("#datepicker4").datepicker("setDate", date4);
});
But I would like to implement it through js array and then want to save data from PHP.
Can anybody guide me on this?
If there would be little code help then it will be very great help for me.
If you want to store your data asynchronously (without full page reload) you can simply make use of jQuerys post function:
$('#submit_btn').click(function(){
$.post( "handler.php", {
dp1: $("#datepicker1").val(),
dp2: $("#datepicker2").val(),
dp3: $("#datepicker3").val(),
dp4: $("#datepicker4").val()
})
.done(function( data ) {
alert( "Data successfully stored!");
});
});
Suggesting that you use an HTML submit button*:
<input type="submit" id="submit_btn" value="send" />
In this example, you would have a handler.php file in the same directory. In this file, you could access the datepicker values through
$_POST['dp1'], $_POST['dp2'] etc.
If you really want to pass an array for some reason (I would pass 4 values just like this), you should transfer a JSON object and decode it in php via
json_decode()
Hope this helps!!
*regarding your markup from the post you referenced, I would suggest packing all the datepickers in a element. Although not necessary, this is syntactically correct and allows you to bind to the "submit" event instead of the click event on the button.
I am wondering if anybody has already coded an elegant solution whereby a blank Bootstrap Datepicker uses, by default, a previously selected date from another datepicker element within a DOM/UI (instead of defaulting to today's date with each new instance). Here is my solution so far -- which works -- using jQuery cookies:
//multiple elements with class 'DatePicker'
$('.DatePicker').datepicker({autoclose:true}).on('show',function() {
//getting cookie of last datepicker, if it exists
lastDate = $.cookie('lastDate') ? new Date($.cookie('lastDate')) : null;
//checking for blank DP and cookie combo, otherwise today is default
if ($(this).val() == '' && lastDate) {
//adding calendar day to date, as DP 'changeDate' event sets object to previous day
lastDate.setDate(lastDate.getDate()+1);
//overriding today-as-default behavior
$(this).datepicker('setDate',lastDate).datepicker('update');
}
}).on('changeDate',function(ev) {
//getting and setting cookie
selectedDate = ev.date;
$.cookie('lastDate',selectedDate);
});
So I have been tasked with creating a jQuery slideshow from an XML file with a timing mechanism to change the images based on date. I have the slideshow working from the XML, but I am struggling with adding the date feature. I would like to be able to "turn on" and "turn off" images based on the onDate and offDate. I understand Javascript is not the best way to show things based on date, but there are limits within the current site structure that prevent server side timing. So I would like to have the ability to load up say 10 images, and then only show three based on what today's date is, and what the onDate/offDate are.
This is the logic I was thinking.... If today is < onDate .hide or if today is > offDate .hide else .show
Where I am struggling
The correct way to enter the date in the XML file.
Parsing the date from XML into something that Javascript and in turn jQuery can use to compare today's date with the date in XML and show the image accordingly.
Once the date has been established figuring out a way to show or hide the specific image based on date.
Any help would be greatly appreciated.
XML
<eq-banner>
<id>1</id>
<url>linktopage.html</url>
<img>image.jpg</img>
<dept>equipment</dept>
<onDate>12/01/2010</onDate>
<offDate>12/31/2010</offDate>
<copy>FREE Stuff</copy>
</eq-banner>
jQuery
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "rotationData.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(equipment) {
$(equipment).find('eq-banner').each(function() {
var id = $(this).attr('id');
var dept = $(this).find('dept').text();
var url = $(this).find('url').text();
var img = $(this).find('img').text();
$('<div class="'+dept+'"</div>').html('<img src="images/'+img+'" /><br />').appendTo('#apparel')
$("#equipment").cycle({
fx:"fade",
speed:100,
timeout:5000
});;
});
}
</script>
HTML
<div id="equipment">
</div>
If you trust the data quality of the XML source, specifically that the dates are all well-formed as in your sample, it's pretty easy to turn that into a JavaScript "Date" object:
var str = "12/31/2010";
var pieces = str.split('/');
var date = new Date(~~str[2], ~~str[0] - 1, ~~str[1]);
(The ~~ trick converts the strings to numbers; do that however you prefer.) Also months are numbered from zero, and hence the subtraction.
Comparing dates works perfectly well in JavaScript, or you can call the ".getTime()" method on a date to explicitly get a "milliseconds since the epoch" value to compare instead.
As to how you'd show/hide the images, I'd be inclined to conditionally add a class to elements to be hidden (or shown; whichever makes the most sense).
XML doesn't have a "correct" way of handling dates, and JavaScript can parse just about anything. However, the most JS-friendly format would be something like "October 20, 2011" with the time optionally added in "12:34:56" format. A string like that can be fed directly to the new Date() constructor and be parsed correctly regardless of location.
datestr = "October 20, 2011";
date = new Date(datestr);
To compare Date objects, just use < or > -- however, a JS Date object contains a time element which will also be compared. So if you create a new Date object for the present with var now = new Date(); and compare it to var dat = new Date("string with today's date"); you'll find that dat is less than now because dat has time 00:00:00 while now has the present time. If this is a problem, you'll have to explicitly compare Date.getDate(), Date.getMonth() and Date.getFullYear() all at once. ( http://www.w3schools.com/jsref/jsref_obj_date.asp )
I created a simple calendar with html and now want the current date to highlight automatically with javascript. I know of a few ways to do this but I am looking for the most simple.
It really depends on how your calendar works. You can get the client's current date with the following JavaScript:
var currentDate = new Date();
Once you have that, you'll have to use the built in date functions to get the current date element and probably add a class to it that will style it as highlighted.
UPDATE
Assuming you have your li elements with id="dayElement_x" where x is the day number, and your class for highlighting your day is currentDay, an example JavaScript call would be:
document.getElementById('dayElement_' + (new Date()).getDate()).className += ' currentDay';
UPDATE 2
I just thought of a solution where you can do this without having a bunch of ids. Here is the JavaScript:
document.getElementById('calendarContainer').
getElementsByTagName('li')[(new Date()).getDate() - 1].className += ' currentDate';