Aquesta és una revisió antiga del document
jquery
datepicker
fuentes
ejemplo
<script> $('#date').datepicker({ uiLibrary: 'bootstrap4', minDate: '01/01/2020', maxDate: '31/12/2020', maxViewMode: 'months', multidate: 15, multidateSeparator: ',', autoclose: false, language: 'ca', datesDisabled: ['02/06/2020', '02/21/2020'], format: 'dd/mm/yyyy' }); </script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <input type="text" id="date">
petición AJAX y modificación DOM
- boostrat
- custom-control-input
- toast
- DataTable
$(document) .ready(function () { $('#recorda').toast('show'); $('#tablecontrols').DataTable({ paging: false, ordering: false, select: true }); $('.dataTables_length').addClass('bs-select'); $('td[data-href]').on('click', function() { window.location = ( $(this).data("href") ); //window.open( $(this).data("href"), "_blank" ); }); $("input:checkbox").on('change', function() { inputObject = $(this); clase = ( $(this).val() == "1") ? 'table-success' : 'table-danger'; id = $(this).attr('data-ajax-id'); field = $(this).attr('data-ajax-field'); isChecked = $(this).is(":checked"); isValue = (isChecked) ? 1 : 0; datos = { 'id':id, 'field':field, 'value':isValue }; ajaxError = 0; $('#desant').toast('show'); jQuery.ajax({ type: 'post', url: '/controller/controls/update-list-checks.php', data: datos, success: function(resp) { $('#desant').toast('hide'); if ( isChecked ) $(inputObject).parents('tr').addClass(clase); else $(inputObject).parents('tr').removeClass(clase); $('#desat').toast('show'); }, error: function(xhr,status,error) { $('#desant').toast('hide'); $('#error').toast('show'); $(inputObject).prop('checked',!isChecked); }, dataType:'json' }); }); });
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <div id="desant" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 9rem; right: 1rem;"> <div class="toast-header"> <span class="badge badge-warning"> </span> <strong class="mr-auto"> Atenció!</strong> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> S'estàn desant les dades... </div> </div> <div id="desat" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000" style="position: absolute; top: 9rem; right: 1rem;"> <div class="toast-header"> <span class="badge badge-success"> </span> <strong class="mr-auto"> Atenció!</strong> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Les dades s'han desat correctament </div> </div> <td class="text-center align-middle"> <div class="custom-control custom-switch mb-3"> <input type="checkbox" data-ajax-id="<?=$element['id']?>" data-ajax-field="exclos" class="custom-control-input" id="exclos<?=$element['id']?>" name="exclos<?=$i?>" value="2" <?=($element['exclos'] == 1) ? 'checked' : ''?>> <label class="custom-control-label" for="exclos<?=$element['id']?>"> </label> </div> <!--input type="checkbox" name="exclos" value="1" <?=($element['exclos'] == 1) ? 'checked' : ''?> /--> </td>
<?php session_start(); // http://www.faqs.org/rfcs/rfc2616.html require_once "../../../config.php"; require_once $BASE_PATH."www/model/model-controls.php"; $codRetronDesc = array( 0 => 'operació realitzada correctament', 1 => 'error en els paràmetres enviats' ); $fieldsPermesos = array('exclos','ressonat'); $codRetorn = 0; $id = ( array_key_exists('id',$_POST) ) ? $_POST['id'] : 0; $field = ( array_key_exists('field',$_POST) ) ? $_POST['field'] : ''; $value = ( array_key_exists('value',$_POST) ) ? $_POST['value'] : ''; if ( (array_search($field,$fieldsPermesos))!== false ) { $data = array( 'id' => $id, $field => $value ); updateControl($data); $headerRetorn = 'HTTP/1.1 200 OK'; } else { $codRetorn = 1; $headerRetorn = 'HTTP/1.1 406 Not Acceptable'; } $arrRespuesta = array( "status" => $codRetorn, "txt" => $codRetronDesc[$codRetorn] ); header($headerRetorn); header('Content-Type: application/json; charset=UTF-8'); echo json_encode($arrRespuesta); ?>