WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Datepicker
Watermarl or selected value option (15 posts)

  1. pbul2004
    Member
    Posted 2 years ago #

    Hi,

    I cant seem to get the inital value working for the selected value. When i enter a date in or %Y etc when i check the site it comes up with 1970!!

    All i want the selected value to say is either "Date" or key in todays date.

    Any ideas?

    Cheers

    http://wordpress.org/extend/plugins/contact-form-7-datepicker/

  2. Krla
    Member
    Posted 2 years ago #

    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!!

  3. vikkineal
    Member
    Posted 1 year ago #

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

  4. Tribus
    Member
    Posted 1 year ago #

    Same problem here!

    Thanks!

  5. vikkineal
    Member
    Posted 1 year ago #

    Hiya

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

  6. cbar126
    Member
    Posted 1 year ago #

    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(http://www.mydomain.com/dat.png)no-repeat;
    border: none;
    }

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

  7. imran3229
    Member
    Posted 1 year ago #

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

  8. crdunst
    Member
    Posted 1 year ago #

    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

  9. imran3229
    Member
    Posted 1 year ago #

    Where to put this function?

  10. crdunst
    Member
    Posted 1 year ago #

    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.

  11. imran3229
    Member
    Posted 1 year ago #

    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.

  12. crdunst
    Member
    Posted 1 year ago #

    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.

  13. imran3229
    Member
    Posted 1 year ago #

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

  14. crdunst
    Member
    Posted 1 year ago #

    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

  15. imran3229
    Member
    Posted 1 year ago #

    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 http://thedosalon.zchand.com/practice/
    Please tell me ASAP what is the problem now with this as i have to fix it soon.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic