javascript - Bootstrap 双日期选择器值解析

Question

我有一个包含 2 个字段的表单，其中包含 Bootstrap 日期选择器。我想用第一个字段的值设置第二个字段的开始日期。你可以吗 帮我？？这是我的示例 html 代码

	<title>Pusat Penelitian Bioteknologi LIPI</title>
	<link rel="shortcut icon" href="http://localhost/SIPEKAT/assets/img/logolipi.png" type="image/x-icon">
	<link href="http://localhost/SIPEKAT/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="http://localhost/SIPEKAT/assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
	<script src="http://localhost/SIPEKAT/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="http://localhost/SIPEKAT/assets/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="http://localhost/SIPEKAT/assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
	<script src="http://localhost/SIPEKAT/assets/js/notifikasi.js"></script>
	<script src="http://localhost/SIPEKAT/assets/js/bootstrap-datepicker.js"></script>
	<link href="http://localhost/SIPEKAT/assets/css/datepicker.css" rel="stylesheet">
	<link href="http://localhost/SIPEKAT/assets/css/dashboard.css" rel="stylesheet">


<!--header-->
<!--header-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#7AD0E7;">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://localhost/SIPEKAT/beranda_user"><img src="http://localhost/SIPEKAT/assets/img/logolipikecil.png">&nbsp;&nbsp;&nbsp;</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
			<li >
				<a href="http://localhost/SIPEKAT/beranda_user"><font color="white">
					<b>BERANDA</b></font>
				</a>
			</li>
			<li class="active">
				<a href="http://localhost/SIPEKAT/barang_user"><font color="white">
					<b>BARANG</b></font>
				</a>
			</li>
			<li >
				<a href="http://localhost/SIPEKAT/informasi_user"><font color="white">
					<b>INFORMASI</b></font>
				</a>
			</li>
			<li >
				<a href="http://localhost/SIPEKAT/riwayat"><font color="white">
					<b>RIWAYAT</b></font>
				</a>
			</li>
		  </ul>
          <ul class="nav navbar-nav navbar-right">
			<li class="dropdown" >
				<a href="#" class="dropdown-toggle" data-toggle="dropdown"><font color="white"><b><span class="glyphicon glyphicon-user"></span>&nbsp;tutang</b>&nbsp;<span class="caret"></span></font></a>
				<ul class="dropdown-menu">
										<li><a href="http://localhost/SIPEKAT/beranda_admin">MENU ADMIN</a></li>
										<li><a href="http://localhost/SIPEKAT/profil">PROFIL</a></li>
					<li class="divider"></li>
					<li><a href="http://localhost/SIPEKAT/masuk/keluar">LOGOUT</a></li>
				</ul>
			</li>
          </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container -->
</div><!--/.navbar -->

<div class="panel panel-default" style="background-color:#f5f5f5">
	<h5 style="margin-left:1150px">24-Mar-2015</h5>
</div>
<!--judul-->
<div class="panel panel-default" style="margin-top:5px;">
  <div class="panel-body" style="background-color:#f1f1f2">
    <h3 style="margin-left:115px;"><a href="http://localhost/SIPEKAT/barang_user">DAFTAR BARANG</a> / FORMULIR PEMINJAMAN</h3>
  </div>
</div>


<!--body-->

<div class="container" style="background-color:#F1F1F2; margin-top:20px; margin-bottom:20px;" >
    <div class="panel-body">
		<form class="form-horizontal" role="form" method="post" id="form_pinjam" name="form_pinjam" action="http://localhost/SIPEKAT/barang_user/simpan">
			<div class="form-header" style="background-color:#7AD0E7;">
				<font color="white"><center>INFORMASI BARANG<center></font>
			</div>
			<br />
			<div class="form-group">			 
				<label for="nama_barang" class="col-md-3 control-label">Nama Barang</label>
				<div class="col-md-8">
					<input type="text" class="form-control" id="nama_barang" name="nama_barang" placeholder="Nama Barang" value="Thermohygrometer / Alat Ukur " disabled>
					<input type="hidden" name="nama_barang_tmp" id="nama_barang_tmp" value="Thermohygrometer / Alat Ukur ">
					<input type="hidden" name="kd_barang" id="kd_barang" value="3030301086">
					<input type="hidden" name="nip" id="nip" value="196304231988031002">
				</div><br />
			</div>
			<div class="form-group">
				<label class="col-md-3 control-label">Pilih Aset</label>
					<div class="col-md-8">
						<table class="table">
							<thead>
								<tr>
									<th></th>
									<th><center>Kode Aset</center></th>
									<th><center>Kondisi</center></th>
									<th><center>Status</center></th>
									<th><center>Keterangan</center></th>
								</tr>
							</thead>
							<tbody>
															<tr>
																			<td>
											<div class="checkbox" >
												<label><input type="checkbox" name="aset[]"value="3030301086-001"></label>
											</div>
										</td>
										<td><center>3030301086-001</center></td>
											<input type="hidden" id="kondisi_3030301086-001" value="baik">
											<input type="hidden" id="status_3030301086-001" value="baik">
										<td><center>baik</center></td>
										<td><center>baik</center></td>
										<td><center>-</center></td>
																	</tr>
															</tbody>
						</table>
					</div>
			</div>
			<div class="form-header" style="background-color:#7AD0E7;">
				<font color="white"><center>INFORMASI LAINNYA<center></font>
			</div><br />
			<div class="form-group">
				<label for="keperluan" class="col-md-3 control-label">Keperluan</label>
				<div class="col-md-8">
					<textarea class="form-control" name="keperluan" id="keperluan" placeholder="Keperluan"></textarea>
				</div>
			</div>
			<div class="form-group">
				<label for="tanggal_pinjam" class="col-md-3 control-label">Tanggal pinjam</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="tanggal_pinjam" id="tanggal_pinjam" placeholder="Tanggal pinjam" >
				</div>
			</div>
			<div class="form-group">
				<label for="tanggal_kembali" class="col-md-3 control-label">Tanggal Kembali</label>
				<div class="col-md-8">
					<input type="text" class="form-control" name="tanggal_kembali" id="tanggal_kembali"  placeholder="Tanggal Kembali">
				</div>
			</div>	
			<div style="margin-left:900px">
				<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
				<button class="btn btn-primary btn-sm" type="submit" form="form_pinjam" id="kirim">Kirim</button>
			</div>
		</form>		
	</div>
</div>
</div>``
 
<script type="text/javascript">
    $(document).ready(function () {
		
		$('#tabel').dataTable();
		
	var date = new Date();
	date.setDate(date.getDate()); //disini tempat buat ganti hari mulainya datepicker
	
	
	$('#tanggal_pinjam').datepicker({
	format: "yyyy-mm-dd",
	weekStart: 1,
	startDate: date,
	clearBtn: true,
	language: "id",
	keyboardNavigation: false,
	forceParse: false,
	daysOfWeekDisabled: "0,6",
	todayHighlight: true,
	
 });
	
 $('#tanggal_kembali').datepicker({
 
	format: "yyyy-mm-dd",
	weekStart: 1,
	clearBtn: true,
	language: "id",
	startDate: date ,
	keyboardNavigation: false,
	forceParse: false,
	daysOfWeekDisabled: "0,6",
	todayHighlight: true
   
 });
 
    });
	
</script>

Answer 1

我认为你想做的是这样的:

下面是js代码:http://jsfiddle.net/rgej2z2e/

$(document).ready(function(){
    $('.dt').datepicker({minDate:0});
    $('#startDate').on('change', function(e){
        $('#endDate').datepicker('update', $(this).val());
    });
});

希望对你有帮助:)