bootstrap-datetimepicker.js时间插件

<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-lg-12 bt-margin">
<div class="ico_input">
<div class="col-md-12 np">
<select class="form-control" name="types" id="types" style="border-color: rgb(210, 214, 222);">
<?php if($roomtype){
foreach ($roomtype as $key => $value) { ?>
<option <?php if ($key == 0 ) { echo 'selected'; } ?> title="<?=$value[0]?>" value="<?= $value[2]?>"><?= $value['0'].'('.$value[1].'人)价格:¥'.$value[2]?></option>
<?php } } else{echo '暂无酒店房型信息';} ?>
</select>
</div>
<div class="ico_input_ico">
<span class="glyphicon glyphicon-menu-down"></span>
</div>
</div>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-lg-6 bt-margin">
<div class="form-group" style="height:48px;">
<div class="input-group date form_datetime" data-date="" data-date-format="" data-link-field="dtp_input1" style="height:48px;">
<input class="form-control" size="16" id="ruzhu" type="text" value="2017-05-08" placeholder="入住时间" readonly style="height:48px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6 bt-margin">
<div class="form-group" style="height:48px;">
<div class="input-group date form_datetime" data-date="" data-date-format="" data-link-field="dtp_input1" style="height:48px;">
<input class="form-control" size="16" id="likai" type="text" value="2017-05-12" placeholder="离店时间" readonly style="height:48px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row" style="margin-left:0;margin-right:0">
<div class="col-lg-12 bt-margin" style="text-align: right;">
<span style="display:none;">总计:<span id="totalMoney" ></span></span>
<span>总计:<span id="totalMoneys"></span></span>
</div>
</div>
<script type="text/javascript">
$(function(){
//设置时间 控件
$('#ruzhu').datetimepicker({
language: 'zh-CN',
defaultDate: new Date(),
endDate: $('#likai').val(),
format: "yyyy-mm-dd",// hh:ii
autoclose: true,
todayBtn: true,
minView: "month"
}).on("click", function (ev) {
$("#ruzhu").datetimepicker("setEndDate", $("#likai").val());
}).on("change", function (ev) {
var arrDate, objDate1, objDate2, intDays;
objDate1 = new Date();
objDate2 = new Date();
arrDate = $("#ruzhu").val().split("-");
objDate1.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
arrDate = $("#likai").val().split("-");
objDate2.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
intDays = parseInt(Math.abs(objDate1 - objDate2) / 1000 / 60 / 60 / 24);
var price = $('#totalMoney').html();
$('#totalMoneys').html(parseFloat(price) * parseInt(intDays));
});
$('#likai').datetimepicker({
language: 'zh-CN',
format: "yyyy-mm-dd",
startDate: $('#ruzhu').val(),
autoclose: true,
todayBtn: true,
minView: "month"
}).on("click", function (ev) {
$("#likai").datetimepicker("setStartDate", $("#ruzhu").val());
}).on("change", function (ev) {
var arrDate, objDate1, objDate2, intDays;
objDate1 = new Date();
objDate2 = new Date();
arrDate = $("#ruzhu").val().split("-");
objDate1.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
arrDate = $("#likai").val().split("-");
objDate2.setFullYear(arrDate[0], arrDate[1], arrDate[2]);
intDays = parseInt(Math.abs(objDate1 - objDate2) / 1000 / 60 / 60 / 24);
$("#dayNum").html(intDays);
var price = $('#totalMoney').html();
$('#totalMoneys').html(parseFloat(price) * parseInt(intDays));
});
//设置时间 控件结束
})
</script>

浙公网安备 33010602011771号