Datepicker - stopping it being editable and autofilled in Checkout Page 0

[graphicz]

I am posting this here because I seem to be blocked from the Drilpine Forum - "You cannot read posts in this forum." "... do not have the permissions..."

Anyway

There is a post on the forum about stopping the User Defined date selected by Datepicker being editable in the Shopping Cart.

My client uses the User Defined field in Checkout Page 0 for his Datepicker as he is selling perishable goods and only deapatches certain days.

His problem was that people would select the available days on Datepicker then edit them as they wished, giving a day that delivery is no available on.

Further when they placed a subsequent order the Datepicker field remembered a previously entered date and then continued with that even though it was not an available delivery day.

I solved the problem by editing the Both Addresses User Defined Field thus - the delivery side is hidden as there are only one delivery date options regardless of delivery address:

<tr>
<td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt014Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
<Actinic:Variable Name="InvoicePrompt014"/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt014Required%22%20%2f%3e" />*</span></actinic:block>
</td>
<td id="nooneedits" class="InvoiceField">
<input type="text" id="datepicker" name="INVOICEUSERDEFINED" size="20" maxlength="255" value="00-00-0000" >
</td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InvoicePrompt016Visible%22%20%2f%3e">
<td id="nooneedits" class="DeliverField">
<actinic:block if="%3cactinic%3avariable%20name%3d%22DeliverPrompt013Visible%22%20%2f%3e"><input type="hidden" id="datepicker" name="DELIVERUSERDEFINED" size="20" maxlength="255" value="00-00-0000" ></actinic:block>
</td>
</actinic:block>
</tr>
<script>
$(function() {
// disable input fields
$( "#nooneedits input" ).prop('readonly', true);
$( "#nooneedits input" ).attr("autocomplete", "off");
});
</script>

Thank you.

[NormanRouxel]

Hi, Jonathan

I've checked again and the Datepicker forum is available to anyone and you don't need to be logged in to see it.
Here's the post regarding Use on Checkout with General User Definable 3


DatePicker can be activated on the checkout to work on one of the user definable fields. Here's how to use it on General User Definable 3.

Go to Design / Text / Web Site (cont) / General Information / General User Definable 3. Check "Show" and set "Current Value" to something like "When do you want it to ship". Set "Required" as appropriate for your site.

Go to Design / Library / Layouts / Checkout Prompt / General User Definable 3 RWD.
Replace all code there with the following:

<fieldset>
<div class="checkout-field-label">
<label for="GENERALUSERDEFINED"><actinic:block if="%3cactinic%3avariable%20name%3d%22GeneralPrompt002Required%22%20%2f%3e"><span class="actrequired"></actinic:block><Actinic:Variable Name="GeneralPrompt002"/><actinic:block if="%3cactinic%3avariable%20name%3d%22GeneralPrompt002Required%22%20%2f%3e">* </span></actinic:block></label>
</div>
<div class="checkout-field-input">
<input class="dpdate" readonly type="text" name="GENERALUSERDEFINED" size="40" maxlength="255" value="<Actinic:Variable Name="GeneralUserDefined"/>"
data-dformat="<actinic:variable name="DatepickerDateFormat" />"
data-sdate="<actinic:variable name="DatepickerStartDate" />"
data-edate="<actinic:variable name="DatepickerEndDate" />"
/>
</div>
</fieldset>

This will use the settings in Settings / Site Options / Prompts / DatePicker.

Tested on SD 2018.

[graphicz]

Thank you Norman, hope you are OK? As you commented publicly I will post my reply here in case it helps anyone else. Please note I have tried different browsers, different IP address via IPN and a new identity and always the same result:

[NormanRouxel]

Very weird Jonathan. Is it only Datepicker that you are having trouble with?

[graphicz]

Indeed it is only the Datepicker section. I have clicked on a few other sections and they all let me post.

[Duncan Rounding]

If it helps - I can view any of the forums without logging in.

[graphicz]

Client running Datepicker in v18 Swift v2 reports that the Datepicker date appears in the Shopping Cart as a Select field with options and these ARE selectable by the customer despite the variable 'DatePickerNoCartEdit' being set to 'True'.



Fortunately https://stackoverflow.com comes up with the solutions.

Give the containing form an ID: in 'View Cart Bulk Area RWD'

<form id="checkoutOform" method="post" action="<actinic:variable name="OnlineScriptURL" value="Cart Manager Script URL" />" <actinic:variable value="Google Analytics Form Tag" name="GoogleAnalyticsMarkup" /> onsubmit="return ValidateCartNameDetails();">

I made up checkoutOform - you can make up your own if you wish.

In 'Cart Product Details With Thumbnails RWD' find around line 51 '<Actinic:XMLTEMPLATE NAME="DateLine">'

<Actinic:XMLTEMPLATE NAME="DateLine">
<div class="item"></div>
<div class="item">
<Actinic:Variable Name="PromptLabel"/>
<Actinic:Variable Name="PromptValue"/>
</div>
</Actinic:XMLTEMPLATE>

Change it so it looks like:

<Actinic:XMLTEMPLATE NAME="DateLine">
<div class="item"></div>
<div id="nooneedits" class="item">
<Actinic:Variable Name="PromptLabel"/>
<Actinic:Variable Name="PromptValue"/>
<style>
#nooneedits option {display:none;}
#nooneedits select::-ms-expand {
display: none;
}
#nooneedits select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0;
/*text-overflow: '';*/
cursor:none;
border: 0px solid #fff;
padding: 0;
background:none;
}
#nooneedits {border-bottom: 1px solid #808080;}
</style>
<script>
$(function() {
// disable select fields
$('#nooneedits option:not(:selected)').attr('disabled', 'disabled')

$('#checkoutOform').on('submit', function() {
$('#nooneedits').prop('disabled', false);
});
$('#nooneedits select').change(function(){
var text = $(this).find('option:selected').text()
var $aux = $('<select/>').append($('<option/>').text(text))
$(this).after($aux)
$(this).width($aux.width())
$aux.remove()
}).change()
});
</script>
</div>
</Actinic:XMLTEMPLATE>

The css removes the drop down arrow and the cursor and the border and background styling.

The javascript does two things:

• Makes the non selected options disabled then removes the disabled tag on submit so the values get passed on.
• Makes the width of the select box fit the content

And there you go. Grateful thanks to the contributors on:

https://stackoverflow.com/questions/...select-element
and
https://stackoverflow.com/questions/...lect-an-option

Any issues please reply here. Posted in good faith without warranty.