Simple independiente JS fecha selector-salsa-calendario

Tiempo de ejecución: 30 minutos. Empezar

Autor: asterixcapri
Views Total: 4,362
Sitio oficial: Ir a la web
Actualizado: March 29, 2019
Licencia: MIT

Vista prévia

Simple Standalone JS Date Picker
– salsa-calendar

Descripción

salsa-Calendar es una librería JavaScript sencilla e independiente creada para generar recolectores de fecha (rango) para las aplicaciones de reservas de Hotel.

Funcionamiento

Inserte el archivo de JavaScript SalsaCalendar. min. js y la hoja de estilo SalsaCalendar. min. CSS en el documento HTML.

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

Cree las entradas de la fecha de check-in y check-out como se indica a continuación.

<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=""
/>

Inicializar el selector de fecha.

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
});

Configure la conexión entre estas dos entradas de fecha y la salida del total de noches que el usuario eligió.

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'
});

Todas las opciones predeterminadas.

{

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: {}
}

Registro de cambios

03/29/2018

  • Corregido para Chrome

Te puede interesar: