Datepicker не работает в модале начальной загрузки - PullRequest
Новая
       17

Datepicker не работает в модале начальной загрузки

0 голосов
/ 11 июля 2019

В приведенном ниже коде у меня есть выбор даты jquery.Я пытался изменить формат даты в модале начальной загрузки.Но это не работает.Пожалуйста, помогите мне решить проблему.На самом деле формат даты - дд / мм / гггг, и я хочу изменить его на гггг-мм-дд в index.php 

<html>
 <head>
  <title>Delete Mysql Data using jQuery Dialogify with PHP Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="jquery-ui.min.css"/>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://www.jqueryscript.net/demo/Dialog-Modal-Dialogify/dist/dialogify.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">GESTION DES FACTURES SONED</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <div class="row">
      <div class="col-md-6">
       <h3 class="panel-title">Liste des factures déja enregistrées</h3>
      </div>
      <div class="col-md-6" align="right">
       <button type="button" name="add_data" id="add_data" class="btn btn-success btn-xs">Nouvelle Facture</button>
      </div>
     </div>
    </div>
    <div class="panel-body">
     <div class="table-responsive">
      <span id="form_response"></span>
      <table id="user_data" class="table table-bordered table-striped">
       <thead>
        <tr>
         <td>Direction</td>
         <td>Compteur</td>
         <td>Localite</td>
         <td>Trim.</td>
         <td>MHTVA</td>
         <td>TVA</td>
         <td>MTTC</td>
         <td>Date</td>
         <td>Affichage</td>
         <td>Mise a jour</td>
         <td>Supp.</td>
        </tr>
       </thead>
      </table>      
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){    
 var dataTable = $('#user_data').DataTable({
  "processing":true,
  "serverSide":true,
  "order":[],
  "ajax":{
   url:"fetch.php",
   type:"POST"
  },
  "columnDefs":[
   {
    "targets":[4,5,6],
    "orderable":false,
   },
  ],   
 });

 $(document).on('click', '.view', function(){
  var id = $(this).attr('id');
  var options = {
   ajaxPrefix: '',
   ajaxData: {id:id},
   ajaxComplete:function(){
    this.buttons([{
     type: Dialogify.BUTTON_PRIMARY
    }]);
   }
  };
  new Dialogify('fetch_single.php', options)
   .title('Consulter les d&eacute;tails dune facture')
   .showModal();
 });

 $('#add_data').click(function(){
  var options = {
   ajaxPrefix:''
  };

  new Dialogify('add_data_form.php', options)
   .title('Ajouter une nouvelle facture')
   .buttons([
    {
     text:'Fermer',
     click:function(e){
      this.close();
     }
    },
    {
     text:'Ajouter',
     type:Dialogify.BUTTON_PRIMARY,
     click:function(e)
     {
      var form_data = new FormData();
      form_data.append('direction', $('#direction').val());
      form_data.append('ncompteur', $('#ncompteur').val());
      form_data.append('localite', $('#localite').val());
      form_data.append('trimestre', $('#trimestre').val());
      form_data.append('mthtva', $('#mthtva').val());
      form_data.append('tva', $('#tva').val());
      form_data.append('mtttc', $('#mtttc').val());
      form_data.append('date', $('#date').val());

      $.ajax({
       method:"POST",
       url:'insert_data.php',
       data:form_data,
       dataType:'json',
       contentType:false,
       cache:false,
       processData:false,
       success:function(data)
       {
        if(data.error != '')
        {
         $('#form_response').html('<div class="alert alert-danger">'+data.error+'</div>');
        }
        else
        {
         $('#form_response').html('<div class="alert alert-success">'+data.success+'</div>');
         dataTable.ajax.reload();
        }
       }
      });
     }
    }
   ]).showModal();
 });

 $(document).on('click', '.update', function(){
  var id = $(this).attr('id');
  $.ajax({
   url:"fetch_single_data.php",
   method:"POST",
   data:{id:id},
   dataType:'json',
   success:function(data)
   {
    localStorage.setItem('direction', data[0].direction);
    localStorage.setItem('ncompteur', data[0].ncompteur);
    localStorage.setItem('localite', data[0].localite);
    localStorage.setItem('trimestre', data[0].trimestre);
    localStorage.setItem('mthtva', data[0].mthtva);
    localStorage.setItem('tva', data[0].tva);
    localStorage.setItem('mtttc', data[0].mtttc);
    localStorage.setItem('date', data[0].date);

    var options = {
     ajaxPrefix:''
    };
    new Dialogify('edit_data_form.php', options)
     .title('Mettre a jour une facture')
     .buttons([
      {
       text:'Fermer',
       click:function(e){
        this.close();
       }
      },
      {
       text:'Mettre a jour',
       type:Dialogify.BUTTON_PRIMARY,
       click:function(e)
       {
        var form_data = new FormData();
        form_data.append('direction', $('#direction').val());
        form_data.append('ncompteur', $('#ncompteur').val());
        form_data.append('localite', $('#localite').val());
        form_data.append('trimestre', $('#trimestre').val());
        form_data.append('mthtva', $('#mthtva').val());
        form_data.append('tva', $('#tva').val());
        form_data.append('mtttc', $('#mtttc').val());
        form_data.append('date', $('#date').val());
        form_data.append('id', data[0].id);
        $.ajax({
         method:"POST",
         url:'update_data.php',
         data:form_data,
         dataType:'json',
         contentType:false,
         cache:false,
         processData:false,
         success:function(data)
         {
          if(data.error != '')
          {
           $('#form_response').html('<div class="alert alert-danger">'+data.error+'</div>');
          }
          else
          {
           $('#form_response').html('<div class="alert alert-success">'+data.success+'</div>');
           dataTable.ajax.reload();
          }
         }
        });
       }
      }
     ]).showModal();
   }
  })
 });

 $(document).on('click', '.delete', function(){
  var id = $(this).attr('id');
  Dialogify.confirm("<h3 class='text-danger'><b>Etes-vous sûr de vouloir supprimer cet enregistrement?</b></h3>", {
   ok:function(){
    $.ajax({
     url:"delete_data.php",
     method:"POST",
     data:{id:id},
     success:function(data)
     {
      Dialogify.alert('<h3 class="text-success text-center"><b>Enregistrement supprimé</b></h3>');
      dataTable.ajax.reload();
     }
    })
   },
   cancel:function(){
    this.close();
   }
  });
 });


});
</script>

в add_data_form.php 

enter code here

<label>Direction R&eacute;gionale</label>
 <select name="direction" id="direction" class="form-control">  
         <option value="Ariana">Ariana</option>  
         <option value="Beja">Béja</option> 
         <option value="Ben Arous">Ben Arous</option>  
         <option value="Bizerte">Bizerte</option> 
         <option value="Gabes">Gabes</option>   
         <option value="Gafsa">Gafsa</option>   
         <option value="Jendouba">Jendouba</option>   
         <option value="Kairouan">Kairouan</option>   
         <option value="Kasserine">Kasserine</option>   
         <option value="Kebeli">Kébeli</option>   
         <option value="Le kef">Le kef</option>   
         <option value="Mahdia">Mahdia</option>   
         <option value="La Manouba">La Manouba</option>   
         <option value="Medenine">Médenine</option>   
         <option value="Monastir">Monastir</option>   
         <option value="Nabeul">Nabeul</option>   
         <option value="Sfax">Sfax</option>   
         <option value="Sidi Bouzid">Sidi Bouzid</option>   
         <option value="Siliana">Siliana</option>   
         <option value="Sousse">Sousse</option>
         <option value="Tataouine">Tataouine</option>   
         <option value="Tozeur">Tozeur</option>   
         <option value="Tunis">Tunis</option>   
         <option value="Zaghouan">Zaghouan</option>   
  </select>
</div>
<div class="form-group">
 <label>Num&eacute;ro de compteur</label>
 <input type="text" name="ncompteur" id="ncompteur" class="form-control" />
</div>
<div class="form-group">
 <label>Localisation</label>
 <textarea name="localite" id="localite" class="form-control"></textarea>
</div>
<div class="form-group">
 <label>Trimestre</label>
 <select name="direction" id="direction" class="form-control">  
         <option value="T1">T1</option>  
         <option value="T2">T2</option> 
         <option value="T3">T3</option>  
         <option value="T4">T4</option>   
  </select>
</div>
<div class="form-group">
 <label>Montant HTVA</label>
 <input type="text" name="mthtva" id="mthtva" class="form-control" />
</div>
<div class="form-group">
 <label>TVA</label>
 <input type="text" name="tva" id="tva" class="form-control" />
</div>
<div class="form-group">
 <label>Montant TTC</label>
 <input type="text" name="mtttc" id="mtttc" class="form-control" />
</div>
<div class="form-group">
 <label>Echu le</label>
 <input type="date" name="date" id="date" class="form-control" />
</div>
<script type="text/javascript">
$('#date').datepicker({
    dateFormat: "yyyy-mm-dd",
    changeMonth: true,
    changeYear: true,
    beforeShow: function() { 
        $('#date').addClass('datepicker');
    }
});
</script>

введите описание изображения здесь

...