Bootstrap Модальные и Bootstrap-datepicker - PullRequest
Новая
       27

Bootstrap Модальные и Bootstrap-datepicker

1 голос
/ 30 сентября 2019

У меня проблема с modal-bootatrap и bootstrap-datepicker .

в datatable, я даю кнопку для редактирования

и когда кнопка редактированияпри щелчке появится модальный загрузчик.

в модальном загрузчике есть форма для редактирования данных.

, и проблема заключается в том, что я нажимаю на ввод для даты (bootstrap-datepicker),все входы будут пустыми.

здесь для исходного кода 

var dataSet = [
    {
    	"id":	1,
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "25-04-2011",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
    	"id":	2,
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "25-07-2011",
        "office":     "Tokyo",
        "extn":       "8422"
    }
];
 
$(document).ready(function() {
    $('#datatabel').DataTable( {
        createdRow: function( row, data, dataIndex ) {
            $( row ).addClass('baris');
        },
        data: dataSet,
        columns: [
        	{ title: "#", render: function (data, type, row, meta) {
        		return meta.row + meta.settings._iDisplayStart + 1;
   		 	}},
            { title: "Name", data: 'name', className: "name" },
            { title: "Position", data: 'position', className: "position" },
            { title: "Office", data: 'office', className: "office" },
            { title: "Extn.", data: 'extn', className: "extn" },
            { title: "Start date", data: 'start_date', className: "start_date" },
            { title: "Salary", data: 'salary', className: "salary" },
            { title: "option", data: "id" , render : function ( data, type, row, meta ) {
              return type === 'display'  ?
                '<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="'+data+'">Click</button>' : data;
            }},
        ]
    } );
} );

$('#exampleModal').on('show.bs.modal', function (event) {
  	var button = $(event.relatedTarget); 
  	var baris = button.parents('tr.baris');
  	var modal = $(this);
  	var form = modal.find('.modal-body');
  
  	var id = button.data('id');
  	var nama = baris.find('.name').text();
  	var position = baris.find('.position').text();
  	var office = baris.find('.office').text();
  	var start_date = baris.find('.start_date').text();
  	var salary = baris.find('.salary').text();
  
  	modal.find('.modal-title').html('Edit Data <b>' + nama + '</b>');
  	form.find('#nama').val(nama);
  	form.find('#position').val(position);
  	form.find('#start_date').val(start_date);
  	form.find('#salary').val(salary);
  	form.find('#office').find('option[value='+office+']').prop('selected', true);
});

$('.date-input').datepicker({
    format: "dd-mm-yyyy",
    endDate: "today",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<table id="datatabel" class="table table-bordered table-striped"></table>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="modal-edit-data" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-edit-data">New message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form-edit">
                    <div class="row baris" id="default">
                        <div class="col-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-nama" id="nama" name="nama">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-nama" id="position" name="position">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <select class="form-control custom-select" id="office" name="office">
                                    <option selected disabled>-- PILIH --</option>
                                    <option value="Edinburgh">Edinburgh</option>
                                    <option value="Tokyo">Tokyo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="text" class="form-control" id="salary" name="salary">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="text" class="form-control date-input" id="start_date" name="start_date" placeholder="dd-mm-yyyy">
                            </div>
                        </div>
                        <input type="hidden" name="id" id="id-edit">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
                <button type="button" class="btn btn-primary" id="submit-edit"><i class="fas fa-check"></i> Simpan</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

1 Ответ

1 голос
/ 30 сентября 2019

Попробуйте, 

$('.date-input').datepicker({
    //your config..
}).on('show.bs.modal', function(event) {
    event.stopPropagation();
});

от: https://github.com/uxsolutions/bootstrap-datepicker/issues/978

...