0

Please note that i have added a custom field in my checkout form using plugin "Flexible Woocommerce Checkout Field Editor". Now i am trying to have the datepicker show always on the page. For that i have used tried the following:

#ui-datepicker-div
{display: block;}

Or

jQuery(window).on("load", function(){
                jQuery("#ui-datepicker-div").show();
}); 

However nothing seems to work. Really appreciate your help. You can check the website at twomoms.kitchen

Appreciate your help.

4
  • <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> add that before closing <head> tag. Jquery is only called after function trying to run, on windows load. Think it should help.
    – Ylama
    Feb 1, 2018 at 9:16
  • Addign the script is making the page blank. Not sure why? Do you have any idea?
    – maddysanoo
    Feb 1, 2018 at 9:47
  • could be because previous versions is in your footer, try adding the Jquery as the below answer, so that the function runs when the document is loaded, which should do because then the jquery is already loaded , and then no need to add it again as my comment above.
    – Ylama
    Feb 1, 2018 at 10:05
  • tried . Does not work :(
    – maddysanoo
    Feb 1, 2018 at 10:29

2 Answers 2

1

Let me try help, so in your console you wil see that Uncaught ReferenceError: jquery is not defined at (index):137 which means that JQuery is not identified.

jquery not the same as jQuery

Replace this in the head:

<script type="text/javascript" language="javascript">

 jQuery(function () {
 jQuery(window).scroll(sticky_relocate);
 sticky_relocate();

 jQuery(this).scrollTop();
 });

 function sticky_relocate() { 
 if ( jQuery(this).scrollTop() > 300) {
 jQuery('#sticky').addClass('stick');
 } else {
 jQuery('#sticky').removeClass('stick');
 }
 }

    jQuery(function() {
         jQuery('#datepicker').datepicker({
             altField: '#wc_order_field_2563', //setting alternate field
             altFormat: 'dd-MM-yy', //setting alternate date format
             fielddateFormat: 'mm-dd-yy' //this is the date format for datepicker field
         });
    });

</script>

Then for the datepicker :

    jQuery(function() {
         jQuery('#datepicker').datepicker({
             altField: '#wc_order_field_2563', //setting alternate field
             altFormat: 'dd-MM-yy', //setting alternate date format
             fielddateFormat: 'mm-dd-yy' //this is the date format for datepicker field
         });
    });
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"], textarea {
    border: none;
    border-bottom: 1px solid #dadada;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 2;
    padding-left: 10px;
    transition: all 0.3s ease;
    width: 100%;
}

.woocommerce-billing-fields label, .woocommerce-shipping-fields label, .woocommerce-account-fields label, .woocommerce-additional-fields__field-wrapper label {
    display: none;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
 <ul>
 <li>i took your HTML from the site, twomoms.kitchen, dont need to make modification to it</li>
 <li>just add this new #datepicker div on top of the html as below</li>
 <li>in the jQuery function the input fields id gets called as can see below</li>
 <li>You can add this Jquery in the <em>script</em> tag in your header ,should work</li>
 <li><strong>goodluck</strong>, comment if you need me</li>
 </ul>


<!-- ADD this div -->
<div id="datepicker"></div>
<!-- ADD this div -->

<div class="woocommerce-additional-fields__field-wrapper">
<p class="form-row form-row-first validate-required" id="wc_order_field_2563_field" data-priority="">
<label for="wc_order_field_2563" class="">Pickup Date <abbr class="required" title="required">*</abbr>
</label>
<input type="text" class="input-text  hasDatepicker" name="wc_order_field_2563" id="wc_order_field_2563" placeholder="Click here to choose your pickup date*: (Tuesday - Saturday)" value="">
</p>
</div>
 
 
</body>
</html>

19
  • Ylama, thank once again. But when i make these changes, the page goes blank :(. Not sure why. Should i add the jquery before all of this code ?
    – maddysanoo
    Feb 1, 2018 at 12:08
  • clear your cache, maybe just a Ctrl + F5 should do. also please just replace the script ` jquery(function () {` with the document ready i added.
    – Ylama
    Feb 1, 2018 at 12:11
  • Have done multiple Ctrl+F5 but the page just stays blank. Thank you for all the help but this isn't working. Need help
    – maddysanoo
    Feb 1, 2018 at 12:24
  • I removed the piece of code there and put the #ui-datepicker-div with jquery instead of documnet. ready. The page loaded however nothing happened on the page. Any pointers for that please?
    – maddysanoo
    Feb 1, 2018 at 12:46
  • The update again makes the page blank. you can see it now.
    – maddysanoo
    Feb 1, 2018 at 12:50
0

Try to insert datepicker on document ready function.

$(document).ready(function(){
  $( "#ui-datepicker-div" ).datepicker( "show" );
});
7
  • Yes Kiran. It sure is. I just need to have it displayed constantly without the click event. Like it should be displayed all the time.
    – maddysanoo
    Feb 1, 2018 at 9:56
  • can you provide the link where you want to implement it. :) Feb 1, 2018 at 10:00
  • it is in the initial post. However it is twomoms.kitchen
    – maddysanoo
    Feb 1, 2018 at 10:00
  • @maddysanoo where on your page is this <div id="ui-datepicker-div"></div> ?
    – Ylama
    Feb 1, 2018 at 10:13
  • also @maddysanoo in your head tag before <script type="text/javascript" language="javascript"> you have an closing </style> tag, remove.
    – Ylama
    Feb 1, 2018 at 10:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.