Bootstrap Datepicker tidak menampilkan tanggal yang dipilih seperti yang disorot

Saya mencoba menerapkan bootstrap datepicker pada tanggal mulai dan tanggal akhir. Ketika saya memilih tanggal mulai, saya memperbarui nilai yang dipilih menjadi tanggal akhir, tetapi ketika saya mengklik tanggal akhir, datepicker terbuka tetapi tidak menyorot tanggal yang dipilih.

Ini kode saya:

$('#start_date, #end_date').datepicker();

$('#start_date').on('changeDate', function (selected) {
    $('#end_date').val($(this).val());
    $(this).datepicker('hide');
});

dan tautan biola js adalah: Tautan biola Js


twitter-bootstrap bootstrap-datepicker
person Maverick    schedule 04.11.2016    source sumber

Jawaban (2)


arrow_upward
4
arrow_downward

Anda harus menetapkan nilai ke pemilih menggunakan setDate alih-alih jQuery val().

Perhatikan bahwa changeDate acara menerima data tambahan termasuk tanggal yang dipilih. Anda dapat menggunakan atribut date untuk menetapkan nilai baru di daftar changeDate Anda.

Berikut contoh kerjanya:

$('#start_date, #end_date').datepicker();

$('#start_date').on('changeDate', function (selected) {
  $('#end_date').datepicker('setDate', selected.date);
  $(this).datepicker('hide');
});
<link href="/id//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="/id//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" id="start_date" />
<input type="text" id="end_date" />

person VincenzoC    schedule 04.11.2016

arrow_upward
1
arrow_downward

Biola yang diperbarui ini memiliki jawaban Anda

https://jsfiddle.net/qcw0dcaL/10/

$('#start_date').datepicker();

 $('#start_date').on('changeDate', function (selected) {
         $('#end_date').datepicker('setDate', selected.date);
          $(this).datepicker('hide');
      });

Anda perlu menggunakan setDate alih-alih menyetel val.

person Pankaj Kumar    schedule 04.11.2016