wiki:ReDesign/calendar

Kalendář pro výběr data

Pro implementaci kalendáře byl zvolen doplněk glDatePicker https://glad.github.io/glDatePicker/

Doplněk bylo nutné rozšířit o vstupní parametr dissabledDateRange, který zakáže zadené datumy a datové intervaly. Pro povolení výběru data ve výdejní dny byl použit parametr selectableDOW, ve kterém jsou nadefinovány povolené výdejní dny výdejáře.

Následuje část kódu, která byla do glDatePicker doplněna za účelem zakázaných dat a datových intervalů:

if(options.dissabledDateRange) {
  $.each(options.dissabledDateRange, function(i, v) {
    var dateFrom = v.from;
    var dateTo = (v.to|| null);
                                                                        
    if (dateTo == null) {
      dateTo = v.from;
    }
									
    // If repeating year, set the from and two to the current date's year
    dateFrom = getRepeatDate(v, dateFrom);
    dateTo = getRepeatDate(v, dateTo);

    // Test to see if this date is dissabled
    if(cellDateTime >= dateFrom.time && cellDateTime <= dateTo.time) {
      isSelectable = false;
    }
  });
}

JS pri použití datapickeru v JSP šabloně je následující:

  var since = $('#since').glDatePicker( {
  showAlways: true,
  cssName: 'flatwhite',
  width: '250',
  dowOffset: 1,
  selectableDOW : [ 1, 2, 3, 4, 5]
  selectedDate: new Date(),
  dissabledDateRange: [
    <%--dovolena--%>
    { from: new Date(yyyy, MM, dd), to: new Date (yyyy, MM, dd) },
                                            
    <%--statni svatky--%>
    { from: new Date(0, MM, dd), repeatYear: true },                                               
  ],
  selectableDateRange: [{from: minSelectedDateSince, to: maxSelectedDateSince}],
  onClick: function(target, cell, date, data) {
    //funkce obstaravajici kroky pri zvoleni data
   }
});
Last modified 18 months ago Last modified on 04/20/19 17:33:45