Simple jQuery UI Datepicker example

by nicolas tenorio

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">

	<div data-role="header">
		<h1>Horario SITMIO: Inicio <img id="out" src="https://servicios.siur.com.co/ParadaMIO/planea/img/buss.svg" style=""> Fin</h1>
<p>Seleccione la fecha: <input type="date" id="date1" name="date1"/></p>
	</div><!-- /header -->

	<div role="main" class="ui-content">
  
		<div id="text"></div>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
 <br/>

CSS

#ui-datepicker-div { font-size: 12px; }
#out {
   width: 30px;
  height: 15px; 
      }
.movie-list thead th,
.movie-list tbody tr:last-child {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.movie-list tbody th,
.movie-list tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.movie-list tbody tr:last-child th,
.movie-list tbody tr:last-child td {
    border-bottom: 0;
}
.movie-list tbody tr:nth-child(odd) td,
.movie-list tbody tr:nth-child(odd) th {
    background-color: #eeeeee; /* non-RGBA fallback  */
    background-color: rgba(0,0,0,.04);
}

JavaScript

function fecha(datefecha){
$.ajax
        ({
              type: "get",

              url: "https://servicios.siur.com.co/mapas/js/horario.php?ruta=&fecha="+datefecha,
              //data: "date="+date,
              success: function(result)
              
              {
             $('#text').html('')
             var htmlString ='<table data-role="table" id="movie-table-custom" data-mode="reflow" class="movie-list ui-responsive"><thead><tr class="ui-bar-d"><th data-priority="1">Ruta</th><th data-priority="2">Inicio</th><th data-priority="3">Fin</th></thead><tbody>'
$.each( result, function(i) {
//console.log(result[i]['RUTAS'])
 htmlString +="<tr><th>"+result[i]['RUTAS']+"</th><td>"+result[i]['HORA_INICIO']+"</td><td>"+result[i]['HORA_FIN']+"</td></tr>";
});
htmlString +="</tbody></table>"
$('#text').append(htmlString)
                //$("#text").text(result[0]) //do something
              }
         });  
     }
$('#date1').datepicker({

    onSelect: function(date, instance) {
fecha(date)
        }
})
$( document ).ready(function() {
fecha(new Date().toLocaleDateString());
console.log( new Date().toLocaleDateString() );
});