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>

posted @ 2017-05-08 17:10  2人4人  阅读(280)  评论(0)    收藏  举报