Selector de fecha en línea limpio mínimo-Hola semana

Vista prévia

Descripción

Hello Week es un complemento de JavaScript de dependencia cero para crear un calendario en línea de varios idiomas limpio para la selección de fecha.

Funcionamiento

Agregue referencias a los archivos JavaScript y CSS de Hello Week.

<link href="dist/helloweek.css" rel="stylesheet">
<script src="dist/helloweek.min.js"></script>

La estructura básica de HTML para el calendario.

<div class="hello-week">

<div class="hello-week__header">


<button class="btn demo-prev">â—€</button>


<div class="hello-week__label"></div>


<button class="btn demo-next">â–¶</button>

</div>

<div class="hello-week__week"></div>

<div class="hello-week__month"></div>
</div>

Inicializar el calendario con la configuración predeterminada.

const myCalendar = new HelloWeek();

Habilite los botones Prev/Next.

const prev = document.querySelector('.demo-prev');
const next = document.querySelector('.demo-next');

Obtenga las fechas actuales, seleccionadas y las últimas seleccionadas.

<p><strong>Today:</strong> </p>
<ul class="demo-today"><span>n/a</span></ul>

<p><strong>Last Picked Day:</strong></p>
<ul class="demo-last"><span>n/a</span></ul>

<p><strong>Picked Days:</strong></p>
<ul class="demo-picked"><span>n/a</span></ul>

const today = document.querySelector('.demo-today');
const picked = document.querySelector('.demo-picked');
const last = document.querySelector('.demo-last');

function actualizarInfo() {

if (this.today) {


today.innerHTML = '';


var li = document.createElement('li');


li.innerHTML = this.today;


today.appendChild(li);

}


if (this.lastSelectedDay) {



picked.innerHTML = '';


for (days of this.selectedDays) {



var li = document.createElement('li');



li.innerHTML = days;



picked.appendChild(li);


}



last.innerHTML = '';


var li = document.createElement('li');


li.innerHTML = this.lastSelectedDay;


last.appendChild(li);

}
}

const myCalendar = new HelloWeek({

onLoad: actualizarInfo,

onChange: actualizarInfo,

onSelect: actualizarInfo
});

Configuración predeterminada del complemento y funciones de devolución de llamada para personalizar el calendario.

const myCalendar = new HelloWeek({



selector: '.hello-week',



lang: 'en',



langFolder: './dist/langs/',



format: 'dd/mm/yyyy',



weekShort: true,



monthShort: false,



multiplePick: false,



defaultDate: false,



todayHighlight: true,



daysSelected: null // ['2019-02-26', '2019-03-01', '2019-03-02', '2019-03-03']



disablePastDays: false,



disabledDaysOfWeek: false,



disableDates: false,



weekStart: 0, // 0 (Sunday) to 6 (Saturday).



daysHighlight: false,



range: false,



rtl: false,



locked: false



minDate: false,



maxDate: false,



nav: ['â—€', 'â–¶'],



onLoad: () => { /** callback function */ },



onChange: () => { /** callback function */ },



onSelect: () => { /** callback function */ },



onClear: () => { /** callback function */ }
});

Cree sus propias cadenas de idioma al igual que el en. JSON .

{


"days": [




"Sunday",




"Monday",




"Tuesday",




"Wednesday",




"Thursday",




"Friday",




"Saturday"


],


"daysShort": [




"Sun",




"Mon",




"Tue",




"Wed",




"Thu",




"Fri",




"Sat"


],


"months": [




"January",




"February",




"March",




"April",




"May",




"June",




"July",




"August",




"September",




"October",




"November",




"December"


],


"monthsShort": [




"Jan",




"Feb",




"Mar",




"Apr",




"May",




"Jun",




"Jul",




"Aug",




"Sep",




"Oct",




"Nov",




"Dec"


]
}

API methods.

// change the month to the previous
myCalendar.prev();

// change the month to the next
myCalendar.next();

// actualizar the calendar
myCalendar.actualizar();

// reset the calendar
myCalendar.reset();

// destroy the calendar
myCalendar.destroy();

// move the calendar to the current day
myCalendar.goToday();

// move the calendar to a specified day
myCalendar.goToDate(date);

// get the selected days
myCalendar.getDays();

// get the highlighted dates
myCalendar.getDaysHighlight();

// set highlighted dates
myCalendar.setDaysHighlight(daysHighlight);

// set the multiple picker
myCalendar.setMultiplePick(Boolean);

// disable past days
myCalendar.setDisablePastDays(Boolean);

// highlight today
myCalendar.setTodayHighlight(state: Boolean);

// set range
myCalendar.setRange(Boolean);

// set locked
myCalendar.setLocked(state);

// set min/max dates
myCalendar.setMinDate(date: String | Number);
myCalendar.setMaxDate(date: String | Number);

// reset the picker
myCalendar.reset(options);

Registro de cambios

v2.10.0 (04/16/2019)

• actualizar

v2.9.1 (03/29/2019)

• actualizar

v2.9.0 (03/28/2019)

• método de restablecimiento añadido

v2.6.0 (03/28/2019)

• feat: se agregó el método setMinDate y setMaxDate.

v2.5.0 (03/27/2019)

• Bugfix

v2.4.0 (03/23/2019)

• Se corrigió el método getDays ().

v2.3.0 (03/19/2019)

• Corregido el método setDaysHighlight ().

v2.2.0 (03/19/2019)

• Añadida traducción al italiano.
• Método FixedgoToDate ().
• Se ha añadido la opción daysSelected.

v2.0.0 (02/24/2019)

• Añadido método setRange alternar el estado del rango.
• Añadido método setLocked establecer calendario bloqueado.
• Añadida la opción RTL permite el diseño de Idiomas escritos de derecha a izquierda (como hebreo o árabe).
• Añadida opción bloqueada establece todos los días de la semana bloqueado.

Intervalo de fechas de mes fijo.

v1.5.0 (12/11/2018)

• actualizar

v1.4.1 (6/18/2018)

• Traducción al español.
• Fix defaultDate opción también minDate y maxDate.

v1.4.0 (5/24/2018)

• Opción NAV Mostrar botones NEXT/PREV.

v1.3.2 (5/22/2018)

• Método Fix utilizado en el intervalo de opciones para omitir las fechas inferiores a la primera fecha seleccionada.