Checkout Options
Customize your Checkout Process on Jumpseller.
Install Bootrstrap Datepicker on Simple Theme
On this page
Use Javascript Responsibly: Other apps and theme elements may contain Javascript code that might interfere with yours. If you are not sure about the effects of this code contact a professional.
Install on Simple Theme
(Requires popper.js included on Simple)
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
// Optional Locales
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.pt.min.js"></script>
Examples
Simple version with dd-mm-yyyy format, week starts on Mondays
<script>
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1
});
});
</script>
Only can pick dates starting tomorrow
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1,
startDate: tomorrow
});
});
</script>
Only can pick dates starting tomorrow, calendar in Spanish:
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1,
startDate: tomorrow,
language: "es"
});
});
</script>
Only can pick dates starting tomorrow, calendar in Spanish, disabled Sundays (0) and Mondays (1):
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1,
startDate: tomorrow,
language: "es",
daysOfWeekDisabled: [0,1]
});
});
</script>
Only can pick dates starting tomorrow, calendar in Spanish, disabled Sundays (0) and Mondays (1), remove holidays:
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
let holidays = ["29/05/2020","03/06/2020"]
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1,
startDate: tomorrow,
language: "es",
daysOfWeekDisabled: [0,1],
datesDisabled: holidays
});
});
</script>
Same as before but if today is past 6 PM tomorrow is not available.
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
holidays = ["29/05/2020","03/06/2020"]
$(document).ready(function(){
$("#order_other_date").datepicker({
format: 'dd/mm/yyyy',
weekStart: 1,
startDate: tomorrow,
language: "es",
daysOfWeekDisabled: [0,1],
datesDisabled: holidays,
beforeShowDay: function(date) {
var today = new Date().getDate(),
tomorrow = today + 1;
// tomorrow and tody is not past 18:00
if ((tomorrow == date.getDate()) && {{ "now" | date: "%H" | minus: 4 }} > 17) {
return false;
} else {
return true;
}
}
});
});
</script>