[Plugin: Contact Form 7 Datepicker] Watermarl or selected value option

I have the same problem!! I want to show a text as watermark like “Select your date” … if it’s not possible the current date it’s possible?

Thanks!!

Any updates on this? I really want to show a value of ‘date’ in the field also

Same problem here!

Thanks!

Hiya

I ended up just using a normal text field and then integrating the query ui date picker. Much easier!

I created class and add a background image 227px by 30px that says Choose your Date with a small Calendar icon.

I added this to my theme css:

.box2 {
height: 30px !important;
width: 227px;
background: url(https://www.mydomain.com/dat.png)no-repeat;
border: none;
}

then on my form:
[date myfield class:box2]

How can i use normal text field and integrate the query ui date picker for displaying the watermark?

I just found this plugin as my jQuery UI datepicker was being cleared by Contact Form 7 before submitting. This plugin works fine though.

With a watermark, you can just do this (providing you’re using jQuery of course):

jQuery(function($){
  $( "#your-element" ).val("your-watermark");
});

This works when you first load up the page, but it doesn’t change back to the watermark if you click out of your datepicker as it would with the CF7 watermark though, so if that’s not something you’re worried about this will work fine

Where to put this function?

Wrap it in a pair of script tags:

<script type="text/javascript">
	jQuery(function($){
		$( "#your-element" ).val("your watermark");
	});
</script>

And place it in the footer of your theme.

i have placed
<script type=”text/javascript”>
jQuery(function($){
$(Booking-Date).val(“Booking Date”);
});
</script>
in the footer of my theme and my form’s code is as below:

[text* your-name "Name"]

[email* your-email  "Email"]

[text your-phone  "Phone"]

[date* Booking-Date  "Booking Date"] <div class="date">date</div>

[textarea your-message "Message"]

[submit "Send"]

But it does not work. Plz tell me where it could be the mistake?

take a look below on my footer theme code too.

</div><!--dropshadow-->
	</div><!--wrapper-->

	<div id="footer">
			<div class="navigation_wrap">
				<div class="navigation">
					<div class="navigation_left">
						<?php //include('searchform.php'); ?>
                        <p>&copy; <?php echo date("Y"); ?> <?php bloginfo('name'); ?></p>
					</div>

					<div class="navigation_right">
						<div class="footerdate">
						<?php //wp_nav_menu( array( 'theme_location' => 'footer', 'menu_class' => 'nav' ) ); ?>
						<div style="clear:both;"> </div>

						</div> 

					</div>

				</div><!--navigation-->
			</div><!--nav wrap-->
		</div><!--footer-->

<script type="text/javascript">

	J('ul.children').parent().attr({'id':'mainLi'});
	J('ul.children').css({'display':'none'});

	J("li#mainLi a:first").attr({'href':'#'});

	J("li#mainLi a:first").click(function(){

		J('ul.children').slideToggle("slow");
	});
	J('ul.children li.current_page_item').parent().css({'display':'block'});

J(function(){
    /* Hide form input values on focus*/ 

    J('input:text').each(function(){
        var txtval = J(this).val();
        J(this).focus(function(){
            if(J(this).val() == txtval){
                J(this).val('')
            }
        });
        J(this).blur(function(){
            if(J(this).val() == ""){
                J(this).val(txtval);
            }
        });
    });
    J('input:date').each(function(){
        var dateval = J(this).val();
        J(this).focus(function(){
            if(J(this).val() == dateval){
                J(this).val('')
            }
        });
        J(this).blur(function(){
            if(J(this).val() == ""){
                J(this).val(dateval);
            }
        });
    });

	J('textarea').each(function(){
        var txtareaval = J(this).val();
        J(this).focus(function(){
            if(J(this).val() == txtareaval){
                J(this).val('')
            }
        });
        J(this).blur(function(){
            if(J(this).val() == ""){
                J(this).val(txtareaval);
            }
        });
    });
});
J('div.date').click(function(){
	J('div.JsDatePickBox').css({'display':'block'});
});
</script>
<script type="text/javascript">
	jQuery(function($){
		$(Booking-Date).val("Booking Date");
	});
</script>

<?php wp_footer(); ?>

</body>
</html>

Thanks.

Hi,

I can’t speak for the rest of your footer code or theme, but the snippet I posted within the script tags is just regular jquery. This is processed after the contact7 shortcode, so jquery doesn’t know what you’re referring to with $(Booking-Date). You would need to do the following:

1) Add an id to your contact7 field, so change:
[date* Booking-Date "Booking Date"]
to
[date* Booking-Date id:booking-date]

2) Change your jQuery to reference that id:

<script type="text/javascript">
	jQuery(function($){
		$(#booking-date).val("Booking Date");
	});
</script>

Give that a try and see if it works,
Best.

It does not work even the width of the field increases when i do all this.

Hi,

It does work, I did it myself a couple of days ago no problem. This method will work for most people out there.

It must be something with your set-up.

Firstly, whether jquery is enabled on your site. I’m not sure how technically minded you are, but look in the source with your browser (Ctrl+U). Ensure jquery is being loaded into your page. If the value isn’t being entered into the field, that seems to me that either jquery isn’t being loaded, or your plugins aren’t set-up properly.

With the width of the field, if you have another element on your page with an ID of ‘booking-date’, perhaps a style is being inadvertently applied. Try changing the id in the plugin shortcode to something unique to e.g. ‘id:contact-booking-date’, then change the jquery to reference that changed id i.e. $(#contact-booking-date).

See if those things help. if not, post your url and I’ll take a look.

Regards

I have done the following change in code and then watermark is appeared but now calender does not displayed.

<script type="text/javascript">
	jQuery(function($){
		$('#Booking-Date').val("Booking Date");
	});
</script>

My URL is https://thedosalon.zchand.com/practice/
Please tell me ASAP what is the problem now with this as i have to fix it soon.