Scenario:
A company wishes to have a PHP email form that will also allow users to select dates for reservations based upon a date selector script.
I’m familiar with creating forms and sending them as emails, but I’m not familiar with how to incorporate a date selector script and processing it as well. Is there anyone able to give me some guidance. I’ve seen Javascript date selectors, but am not sure how to incorporate those.
form.php
<form action="formaction.php" method="get">
<select id="day" name="day">
<?php
$days = range(1,31);
foreach ($days as $day){
echo "<option value=$day>$day</option>" . PHP_EOL
}
?>
</select>
<input type="submit">
</form>
formaction.php
if( isset( $_GET["day"] && (int)$_GET['day'] > 0) {
$msg = "I'd enjoy some action on the ". $_GET['day'] ." day of this month please" ;
mail( $to, $subject, $msg );
}
That’s the basic principle, you’d likely do a lot more validation also I’d recommend reading up on the indispensible [fphp]checkdate[/fphp] function.
Thank you! That’s a big help.
Next question, do you or know of anyone who has had experience using the YUI Calendar with MySQL data? I’m looking into using this widget, but am not sure how to use it with a dataset from MySQL.
Hi,
No, never used it, but looking at the docs you might be able to align its native date representation (M/D/Y) with mysql (Y-M-D) by fiddling around with some YUI Cal settings;
“MD_MONTH_POSITION - Number
The position of the month in a month/day date string
Default Value: 1”
similarly with the delimeters, so that the whole thing’d go straight into your DB with very little messing around.
Still be up to you to validate the incoming data though.
Most JS <-> backend date transfers mean some kind of munging process, but on the face of it this one looks to be pretty easy.
So you want to pop up a date picker, the user picks a date, you enter that into a db, and then email them some kind of confirmation.
Is it just one date?
Or is it for a range (2nd to 5th July) or array (2nd, 9th, 30th July) of dates?
Toad see if any of this code helps. I wrote it a while ago, and modified it slightly to post here (to be a bit more general in use), but haven’t retested it.
It’s for YUI 2.
Sample markup
<div id="myContainer"></div> <!-- YUI calendar rendered here -->
<input type='hidden' name='myDateField' id='myDateField'>
captureDate function, listens to a date selection on the YUI calendar and writes the date to a form input as YYYY-MM-DD (which can go directly into a MySQL date field once you validate it server side)
/**
* Capture the selected date from a YUI calendar and assemble date into hidden form field
* @param object cal YUI calendar instance
* @param mixed el ID or element reference for input field to set date to
*/
function captureDate(cal, el) {
//YUI shortcut
var $ = YAHOO.util.Dom.get;
//Get both elemementID (for flag reference) and actual element to store date
if(typeof el == 'string') {
elID = el;
el = $(el);
}
else {
elID = el.ID;
}
if(!el) return;
//Process selected date
var handleDateSelect = function(type, args, obj) {
var dates = args[0];
var date = dates[0]; //single date only (not range)
el.value = dateStamp(date[0], date[1], date[2]);
//Date stamp component for server (2010-07-02)
function dateStamp(y, m, d) {
return y + '-' + m + '-' + d;
}
};
cal.selectEvent.subscribe(handleDateSelect, cal, true);
}
JS to initialize the calendar and listen for date selection
//Render Calendar
var calConfig = {
start_weekday: 1,
navigator : true
};
var cal = new YAHOO.widget.Calendar('myContainer', calConfig);
cal.render();
captureDate(cal, 'myDateField');
That should get you started. To be proper progressive enhancement the myDateField should be text (not hidden) by default and you instruct users to enter as YYYY-MM-DD. You can then use JS to change it to a hidden field and remove those instructions so that JS users use the calendar picker instead.
This is all for a single date. If you need ranges as Cups described you’ll need to hit up the YUI docs and extend this a bit.
Great! I’ll check this out and try it!
Thank you!