Adding A pick up date AND a Drop Off date

Tourist
4 0 1

Hello, I am new to the community. I am trying to add a pick up date field and time as well as a drop off field date and time. This is for a laundry service which requires that the customers laundry is picked up one day and dropped back off on another day. I have managed to add the initial field following the shopify tutorial, but when I duplicate part of the code, I do get the second field, but it does not do anything. This is what I have done

 

 <div style="width:300px; clear:both;">
  <p>
          <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
    <label for="date">Pick a Pick Up date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
  </p>     
      <p>
    <label for="date">Pick a Delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />   
  </p>  
</div>
I am also looking to add a time window selection and make date and time selection mandatory. 
I am new to coding but am very motivated to learn. Any help or guidance is truly appreciated.
 
Thanks!
 
0 Likes
Shopify Partner
462 80 92

You the sam ID 'date' in 2 places, change it the second one to date2, also the name="attributes[date]" should be unique as well, like a name="attributes[drop off]"

also, for the script which is activating those fields making them as date picker, you should edit to make the second field work as well, I don't know which code is it, but I am sure that there is some javascript for it.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
4 0 1

Thank you for the reply. So here are the changes

 <div style="width:300px; clear:both;">
  		<p>
          <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
    		<label for="date">Pick a Pick Up date:</label>
    		<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    		
  		</p>
      
      <p>
    		<label for="date2">Pick a Delivery date:</label>
    		<input id="date2" type="text" name="attributes[delivery]" value="{{ cart.attributes.date }}" />
    		
  		</p>
      
	</div>

also under my theme.js which is where I think this function resides, is the following code (from the tutorial)

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );
    });
  });

What Im trying to understand though is, based on what Im understanding, I have to  create a new function for #date2  for the second date picker? Can I not call a unique instance of the original function when I call it with the previous code? Sorry if this is a basic question, I am new to this, and thank you again for your help, I do appreciate it. 

 

0 Likes
Shopify Partner
462 80 92

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
4 0 1

That worked great, thank you so much. So I thought I tried that before and it wasnt working but it was becasuse when I added the second part of the code originally, apparnetly I had "$(function() {" twice.

 

Thanks again!


@sarhov wrote:

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });


@sarhov wrote:

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });


@sarhov wrote:

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });


@sarhov wrote:

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });


@sarhov wrote:

So, to make your second datapicker work as it should your edit your script.

 

$(document).ready( function() {
    $(function() {
      $("#date").datepicker( {
        minDate: +1,
        maxDate: '+8',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

      $("#date2").datepicker( {
        minDate: +2,
        maxDate: '+9',
        beforeShowDay: jQuery.datepicker.noWeekends
      } );

    });
  });

 

1 Like
Highlighted
Shopify Partner
462 80 92

You're mostly welcome.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes