Simple Standalone JS Date Picker – salsa-calendar

salsa-calendar is a simple, standalone JavaScript library created to generate date (range) pickers for hotel booking applications.

How to use it:

Insert the JavaScript file SalsaCalendar.min.js and style sheet SalsaCalendar.min.css into the html document.

<script src="build/SalsaCalendar.min.js"></script>
<link rel="stylesheet" href="SalsaCalendar.min.css">

Create the check-in and check-out date inputs as follows.

<input type="text"
       id="checkin"
       class="salsa-calendar-input"
       autocomplete="off"
       name="arrival"
       value=""
/>
<span class="counter"></span>
<span class="singular" style="display:none;">night</span>
<span class="plural" style="display:none;">nights</span>
<input type="text"
       id="checkout"
       class="salsa-calendar-input"
       autocomplete="off"
       name="departure"
       value=""
/>

Initialize the date picker.

var calendar_from = new SalsaCalendar({
    inputId: 'checkin',
    lang: 'en',
    range: {
      min: 'today'
    },
    calendarPosition: 'right',
    fixed: false,
    connectCalendar: true
});
var calendar_to = new SalsaCalendar({
    inputId: 'checkout',
    lang: 'en',
    range: {
      min: 'today'
    },
    calendarPosition: 'right',
    fixed: false
});

Setup the connection between these two date inputs and output the total of nights you user picked.

new SalsaCalendar.Connector({
    from: calendar_from,
    to: calendar_to,
    maximumInterval: 21,
    minimumInterval: 1
  });
new SalsaCalendar.NightsCalculator({
  from: calendar_from,
  to: calendar_to,
  nightsNo: 'nights-no'
});

All default options.

{
  lang: 'en',
  yearsNavigation: false,
  range: {
    min: false,
    max: false,
    weekdays: false,
    closing_dates: false
  },
  minDate: false,
  allowEmptyDate: false,
  inputReadOnly: false,
  showNextMonth: false,
  onSelect = function(input) {},
  calendarPosition: 'bottom',
  fixed: false,
  dateFormats: {}
}

Changelog:

06/24/2018

• Bugfix

03/29/2018

• Fixed for Chrome