JSFiddle - React, Tailwind, and code Playground

by amarcinkowski

HTML

<fieldset>

        
<div class="type-text">

  <label for="date_from">Date1:</label>
  <input type="text" size="20" id="date_from" name="rent-a-car[date_from]" value="" readonly="readonly" />
</div>

         
<div class="type-select">

    <label for="time_from_hour">Hour1: </label>
    <select id="time_from_hour" name="rent-a-car[time_from_hour]" class="select">
        <option value="">---</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
    </select>
    <span> : </span>
  
    <label for="time_from_minute" style="display: none;">minute1: </label>
    <select id="time_from_minute" name="rent-a-car[time_from_minute]" class="select">
        <option value="">---</option>
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
    </select>

</div>

<div class="type-select">
   
    <label for="get_car">City1:</label>
    <select id="get_car" name="rent-a-car[get_car]" class="select">
        <option value="">---</option>
        <option value="Katowice">Katowice</option>
        <option value="Kraków">Kraków</option>
        <option...

JavaScript

var today = new Date().getDay();
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(0, 0, 0, 0);
var disabledDays = ['15/8/2012', '1/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
function noWeekendsOrHolidays(date) {
     var noWeekends = $.datepicker.noWeekends(date);
     var holiday = $.inArray($.datepicker.formatDate('d/m/yy', date), disabledDays) > -1;
     var friSat = today >= 5 && date.getTime() == tomorrow.getTime();
     return [!friSat];
}

$(function () {

var disabledDays = ['15/8/2012', '01/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];

$.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy', dayNamesMin: ['Nie', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
    dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
    monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],    
    changeMonth: true, changeYear: true, numberOfMonths: 1, constrainInput: true, firstDay: 1});

$('#date_from, #date_to').datepicker({
    beforeShowDay: noWeekendsOrHolidays,
    defaultDate: '+1d', minDate: '+1d', 
    onSelect: function (dateText, inst) {        
        var dateMin = $('#date_from').datepicker('getDate');            
        var dateMax = $('#date_to').datepicker('getDate');            
        if (this.id == 'date_from') {            
            var rent_date_from = new Date(
                dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);            
            var rent_date_to = new Date(
                dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 29);            
            $('#date_to').datepicker('option', {minDate: rent_date_from, maxDate: rent_date_to});        
        }        
        $('#day_of_week1').val($.datepicker.formatDate('DD', dateMin));        
        $('#day_of_week2').val($.datepicker.formatDate('DD', dateMax)); 
        
        // sprawdzenie czy dzien...