SimpleModal Contact Form (SMCF)
add date/timepicker to smcf (2 posts)

  1. chrisvwlc
    Posted 3 years ago #

    Can you tell me how to add a date/timepicker to the contact form?
    Here, http://www.ericmmartin.com/projects/simplemodal/ I have read

    onShow: Useful for binding events or any other actions you might want to perform after the modal dialog elements have been displayed. If you are including another plugin (TinyMCE, DatePicker, etc.) in a modal dialog, this is where you want to initialize that plugin.

    But I'm not sure what else has to be added and where. Thanks for any guidance.


  2. chrisvwlc
    Posted 3 years ago #

    Maybe it would be a good idea for me to state what I've tried:
    In smcf.php I've added:

    if (!is_admin()) {
    			//added for datepicker
    			wp_enqueue_script("jquery-ui", "http://code.jquery.com/ui/1.8.24/jquery-ui.min.js", array("jquery"), '', true);
    			wp_enqueue_script("jquery-timepicker", get_option("siteurl") . SMCF_DIR . "/js/jquery-ui-timepicker-addon.js", array("jquery"), '', true);
    			wp_enqueue_script("jquery-slider", get_option("siteurl") . SMCF_DIR . "/js/jquery-ui-sliderAccess.js", array("jquery"), '', true);
    			//plugin default js
    			wp_enqueue_script("jquery-simplemodal", get_option("siteurl") . SMCF_DIR . "/js/jquery.simplemodal.js", array("jquery"), "1.4.3", true);
    			wp_enqueue_script("smcf", get_option("siteurl") . SMCF_DIR . "/js/smcf.js", array("jquery-simplemodal"), $this->version, true);
    			// add styling
    			wp_enqueue_style("smcf", get_option("siteurl") . SMCF_DIR . "/css/smcf.css", false, $this->version, "screen");
    			// added css files for datepicker
    			wp_enqueue_style("smcf-ui", get_option("siteurl") . SMCF_DIR . "/css/ui-lightness/jquery-ui-1.8.18.custom.css", false, '', "screen");
    			wp_enqueue_style("smcf-timepicker", get_option("siteurl") . SMCF_DIR . "/css/jquery-ui-timepicker-addon.css", false, '', "screen");
    			wp_enqueue_style("smcf-datepicker", get_option("siteurl") . SMCF_DIR . "/css/ui.datepicker.css", false, '', "screen");

    further down, in the output of the form, I added:

    <label for='thickbox_datepicker'>Date:</label>
    			<input type='text' id='thickbox_datepicker' class='smcf-input' name='date' tabindex='1004' value='Choose a Date' />";

    In smcf.js, I've initialized datepicker with:

    onShow: function() {
    			$('#thickbox_datepicker').datetimepicker({ beforeShowDay: nonWorkingDates, minDate: 7, ampm: true, hourMin: 11, hourMax: 17, stepMinute: 15, addSliderAccess: true, sliderAccessArgs: {touchOnly: false} });  function nonWorkingDates(date){ var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6; var closedDates = [[7, 29, 2009], [8, 25, 2010]]; var closedDays = [[Sunday], [Monday]]; for (var i = 0; i < closedDays.length; i++) { if (day == closedDays[i][0]) { return [false]; } } for (i = 0; i < closedDates.length; i++) { if (date.getMonth() == closedDates[i][0] - 1 && date.getDate() == closedDates[i][1] && date.getFullYear() == closedDates[i][2]) { return [false]; } } return [true]; }}
    			onClose: contact.close,

    Lastly, In smcf_data.php, I've added:
    $date = isset($_POST["date"]) ? $_POST["date"] : "";
    to the processing
    along with
    sendEmail($name, $email, $subject, $date, $message, $cc);
    to the token matching conditional
    Right now, I'm getting a 404 not found when I click on the link. Before my changes, the form was working just fine. And even after adding much of it, it still worked but the datepicker never appeared and the message in the date field to 'select a date' became the message that was sent in the form.
    Thanks for any help!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • SimpleModal Contact Form (SMCF)
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic