Support

Install Bootrstrap Datepicker on Simple Theme

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.

Content

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>