We Keep Coding

Adding time to jQuery datepicker() function

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/

WordPress ContactForm7 datepicker field - disable/block specific dates?

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')"

Breaking down a date into segments [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Simplest way to parse a Date in Javascript
I understand how do get the data and break it down into it's segments, i.e.
alert( ( new Date ).getDate() );
and
alert( ( new Date ).getFullYear() );
alert( ( new Date ).getFullMonth() );
etc etc.
But how do I do the same but use a date from a html textbox? instead of reading new Date?
The date in the HTML box would be formated as follows
31/10/2012

You could try:
var datearray = input.value.split("/");
var date = new Date(datearray[2],datearray[1] - 1,datearray[0])

If your textbox has proper string format for a date object you can use:
var aDate = new Date($("textbox").val());
However, if you dont write it in the text box exactly as you would in a string passing to the object, you'll get null for your variable.
FYI, I made a plugin that "extends" the Date object pretty nicely and has preformatted date/times that include things like a basic SQL datetime format.
Just go to this jsFiddle, Copy the code between Begin Plugin and End Plugin into a js file and link it in your header after your jQuery.
The use is as simple as above example:
var aDate = new DateTime($("textbox").val());
And to get a specific format from that you do:
var sqlDate = aDate.formats.compound.mySQL;

JavaScript - Input a date then autopopulate next field with difference

Hi this is making me nuts. I am not a developer. Trying to get this to work.
User puts in a date (hire date) into form using Date object (calendar)
Next field should take that date and subtract todays date to get the length of employment.
But I get undefined in the field AND my original hire date disappears.
Here is what I have, help please, much appreciation!
//grab date of hire
try{document.getElementById("dData_DOH").onchange = custom_calculateDate;}catch(e){}
//not sure if necessary - field that the difference should go to
try{document.getElementById("dData_LengthEmp").onblur = insertDate;}catch(e){}
//Function to grab input hire date
//Create variable for now
//Create variable for difference
function custom_calculateDate(){
var hireDate = document.getElementById("dData_DOH").value = "";
var timeNow= new Date();
var diff = Math.abs(timeNow - hireDate);
document.getElementById("dData_DOH").setAttribute('value', custom_calculateDate());
}
//Function to get the difference into the LengthEmp field
function insertDate() {
document.getElementById("dData_LengthEmp").setAttribute("", custom_calculateDate());
}
I know this is completely wrong, as I said I am not a developer or programmer, I cannot figure out how to get this information into this field and get my original field to still show.
Thank you for reading this!

Use value instead of setAttribute
document.getElementById("dData_DOH").value = custom_calculateDate();

Wow wow wow.
I'll try to rewrite your code by giving you explainations about why:
// Firstly, the onchange event doesn't work on IE for text inputs, prefer onblur
document.getElementById('dData_DOH').onblur = function(e) {
// Now let's get some variables
var hireDate = this.value, // "this" refers to the element that triggered the event
now = new Date(),
// You were on the right track for the difference, almost!
diff = Math.abs(new Date(now.getTime() - hireDate.getTime()))
// Finally, just don't change the original field, but the one you wanted to modify
document.getElementById('dData_LengthEmp').value = diff.toTimeString() // Get the time as a readable format
}
I haven't tested the solution, but it should get you on the track.
Btw, don't use try/catch.

jQuery Slideshow from XML with date parameters

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 )