JSFiddle - React, Tailwind, and code Playground

by horhey

HTML

<label for="from">Dates From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />  
<p>
  <label for="spinner">Number of Bags (1-4):</label>
  <input id="spinner" name="value" />
</p> 
<button>Reserve Flight</button>
    <div   id="dialog-message" title="Success">
  <p>
    <span  style="float: left; margin: 0 7px 50px 0;"></span>
    Your flight has been booked.
  </p>
        
 
</div>

CSS

#dialog-message{display:none}

JavaScript

$(function() {
         
    var spinner = $( "#spinner" ).spinner();
    spinner.spinner( "value", 1 );
 
    spinner.spinner({
      spin: function( event, ui ) {
        if ( ui.value > 4 ) {
          $( this ).spinner( "value", 1 );
          return false;
        } else if ( ui.value < 1 ) {
          $( this ).spinner( "value", 4 );
          return false;
        }
      }
    }); 
   $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
   
  
     $( "button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
          
           $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
      });
     
  });