Javascript Examples

example-js.md

First example

Improving Air Datepicker behavior

Improviments done:

• When manually inputing a date, the datepicker should follow to show the same date;
• When insert an invalid date, the datepicker is cleaned;

 
  function hasCharacter(value){
    var regexOnlyNumbers = /^\d+$/;
    return !regexOnlyNumbers.test(value);
  }

  function clearDatePickerIfIsAnInvalidYear(datePicker, dateAsString){
    [day, month, year] = $(dateAsString).val().split("/");
    if(hasCharacter(day)) { datePicker.clear(); }
    if(hasCharacter(month)) { datePicker.clear(); }
    if(hasCharacter(year)) { datePicker.clear(); }
    if(year < 100) { datePicker.clear(); }
  }

  function returnToSelectedDate(datePickerShown, dateAsString){
    var selectedDateString = $(dateAsString).val();
    if (selectedDateString == "") { return; }
    
    [day, month, year] = selectedDateString.split("/");

    var selectedDate = new Date(year, month -1, day);

    datePickerShown.date = selectedDate;
    datePickerShown.selectDate(selectedDate);
  }

  function createDatePicker(inputId){
    var datePicker = $(inputId).datepicker({
      language: "pt-BR",
      clearButton: true,
      todayButton: new Date(),
      dateFormat : 'dd/mm/yyyy',
      maxDate: new Date("2100", "01", "01"),
      onHide: function (datePickerShown, animationCompleted){ clearDatePickerIfIsAnInvalidYear(datePickerShown, inputId); },
      onShow: function(datePickerShown, animationCompleted){ returnToSelectedDate(datePickerShown, inputId); },
      onSelect: function(formattedDate, date, inst) { movePatientAgeToRelatedField(); }
    }).data('datepicker');

    return datePicker;
  }

  function isNotAValidDay(day, month){
      var february = 2;
      var lastValidDayInFebruary = 29;

      if(hasCharacter(day)) return true;
      
      if(month == february && day > lastValidDayInFebruary) { return true; }

      if (day < 1 || day > 31) { return true; }
      
      return false;
  }

  function isNotAValidMonth(month){
    if(hasCharacter(month)) return true;

    return (month < 1 || month > 12);
  }


  function hasAtLeastTwoCaractersIn(year){
    return year.length >= 2;
  }
  
  function isAValidYear(year){
    return year > 99;
  }

  function selectingDateManually(partialDateSelected, datePicker){
    var dateElements = partialDateSelected.val().split('/');
    
    if(dateElements.length != 3){ return; }

    [day, month, year] = dateElements;

    if(isNotAValidDay(day, month) || isNotAValidMonth(month)){
      datePicker.clear();
      return;
    }

    if(hasAtLeastTwoCaractersIn(year) && isAValidYear(year)){
       var newSelectedDate = new Date(year, month - 1, day);
       datePicker.date = newSelectedDate;
       datePicker.selectDate(newSelectedDate);
    }
   
  }

  function datePickerInitialize(inputId, index, array) {
    var datePicker = createDatePicker(inputId);

    $(inputId).on('keyup', function(){
       selectingDateManually($(this), datePicker);
    });
  }

  function datePickerInit(inputsIds){
    for(var element = 0; element < inputsIds.length; element++){
      datePickerInitialize(inputsIds[element])
    }
  }

Second example

To calculate age from selected date on air datepicker

  function getDay(date){
    return date.getDate();
  }
  
  function isTodayLesserThanDayOfBirth(today, birthDate){
    return getDay(today) < getDay(birthDate);
  }

  function BirthdayDoesNotHappenedYet(today, birthDate){
    var diffMonth = today.getMonth() - birthDate.getMonth();
    return (diffMonth < 0 || (diffMonth === 0 && isTodayLesserThanDayOfBirth(today, birthDate)));
  }

  function calculateAge(unconvertedBirthDate) {
    var today = new Date();
    var birthDate = new Date(unconvertedBirthDate);
    var age = today.getFullYear() - birthDate.getFullYear();
   
    if (BirthdayDoesNotHappenedYet(today, birthDate)) {
        age--;
    }
    return age;
  }

  function updatePatientAge(age, ageElement, ageElementHidden){
    if(isNaN(age)){
      $(ageElement).val("");
      $(ageElementHidden).val("");
      return;
    }
    $(ageElement).val(`${age} anos`);
    $(ageElementHidden).val(age);
  }

  function getBirthDate(){
    var brazilianDate = $('.patient_birth_date').val();
    [dia, mes, ano] = brazilianDate.split("/");
    return new Date(`${mes}/${dia}/${ano}`);
  }

  function movePatientAgeToRelatedField (){
     var age = calculateAge(getBirthDate());
     updatePatientAge(age, '#patient_ui_age', '#patient_ui_hidden_age');
  }

  $(function(){
    datePickerInit(['#patient_ui_birth_date']);
  });

Third Example

To flow between tabs and its contents

    var btnAllSummatedBills = document.getElementById('btn-all-summated-bills');
    var btnPaidBills = document.getElementById('btn-paid-bills');
    var btnUnpaidAndNotOverdueBills = document.getElementById('btn-unpaid-not-overdue');
    var btnUnpaidAndOverdueBills = document.getElementById('btn-unpaid-overdue');
    var btnAllProceduresHistory = document.getElementById('btn-all-procedures-history');
    var btnAllAnamnesisHistory = document.getElementById('btn-all-anamnesis-history');
    var btnAllSickNotesHistory = document.getElementById('btn-all-sick-notes-history');

    var divGeneralView = document.getElementById('total-bills-values');
    var divPaidView = document.getElementById('paid-bills');
    var divUnpaidAndNotOverdueView = document.getElementById('unpaid-bills-not-overdue');
    var divUnpaidAndOverdueView = document.getElementById('unpaid-bills-overdue');
    var divProceduresHistoryView = document.getElementById('procedures-history');
    var divAnamnesisHistoryView = document.getElementById('anamnesis-history');
    var divSickNotesHistoryView = document.getElementById('sick-notes-history');

    btnAllSummatedBills.addEventListener('click', activateGeneralView);
    btnPaidBills.addEventListener('click', activatePaidView);
    btnUnpaidAndNotOverdueBills.addEventListener('click', activateNotOverdueView);
    btnUnpaidAndOverdueBills.addEventListener('click', activateOverdueView);

    btnAllProceduresHistory.addEventListener('click', activateProceduresHistoryView);
    btnAllAnamnesisHistory.addEventListener('click', activateAnamnesisHistoryView);
    btnAllSickNotesHistory.addEventListener('click', activateSickNotesHistoryView);

    function unselectThis(buttons){
        buttons.forEach(function(buttonView, index, array){
            buttonView.className = "btn btn-default waves-effect";
        });
    }

    function deactivateThis(incomesViewElements){
        incomesViewElements.forEach(function(incomeViewElement, index, array){
            incomeViewElement.style.display = "none";
        });
    }

    function activateThis(incomeView, buttonView){
        buttonView.className = "btn btn-info waves-effect";
        incomeView.style.display = "block";
    }

    function activateGeneralView(){
        var buttons = [btnPaidBills, btnUnpaidAndNotOverdueBills, btnUnpaidAndOverdueBills];
        var viewsElements = [divPaidView, divUnpaidAndNotOverdueView, divUnpaidAndOverdueView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divGeneralView, btnAllSummatedBills);
    }

    function activatePaidView(){
        var buttons = [btnAllSummatedBills, btnUnpaidAndNotOverdueBills, btnUnpaidAndOverdueBills];
        var viewsElements = [divGeneralView, divUnpaidAndNotOverdueView, divUnpaidAndOverdueView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divPaidView, btnPaidBills);
    }

    function activateNotOverdueView(){
        var buttons = [btnAllSummatedBills, btnPaidBills, btnUnpaidAndOverdueBills];
        var viewsElements = [divGeneralView, divPaidView, divUnpaidAndOverdueView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divUnpaidAndNotOverdueView, btnUnpaidAndNotOverdueBills);
    }

    function activateOverdueView(){
        var buttons = [btnAllSummatedBills, btnPaidBills, btnUnpaidAndNotOverdueBills];
        var viewsElements = [divGeneralView, divPaidView, divUnpaidAndNotOverdueView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divUnpaidAndOverdueView, btnUnpaidAndOverdueBills);
    }

    function activateProceduresHistoryView(){
        var buttons = [btnAllAnamnesisHistory, btnAllSickNotesHistory];
        var viewsElements = [divAnamnesisHistoryView, divSickNotesHistoryView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divProceduresHistoryView, btnAllProceduresHistory);
    }

    function activateAnamnesisHistoryView(){
        var buttons = [btnAllProceduresHistory, btnAllSickNotesHistory];
        var viewsElements = [divProceduresHistoryView, divSickNotesHistoryView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divAnamnesisHistoryView, btnAllAnamnesisHistory);
    }

    function activateSickNotesHistoryView(){
        var buttons = [btnAllProceduresHistory, btnAllAnamnesisHistory];
        var viewsElements = [divProceduresHistoryView, divAnamnesisHistoryView];
        unselectThis(buttons);
        deactivateThis(viewsElements);
        activateThis(divSickNotesHistoryView, btnAllSickNotesHistory);
    }