<!DOCTYPE html> <html> <head> <title></title> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <form action="" class="form-horizontal" role="form"> <fieldset> <legend>Test</legend> <div class="form-group"> <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label> <div class="input-group date form_date col-md-5" id="start-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /><br/> </div> <div class="form-group"> <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label> <div class="input-group date form_date col-md-5" id="end-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /><br/> </div> </fieldset> </form> </div> <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script type="text/javascript"> var startDate = new Date(new Date().getTime() - 7 *24 * 60* 60 * 1000); var endDate = new Date(); $('#start-date').datetimepicker({ initialDate:startDate, language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0, endDate:endDate }).on('changeDate', function(ev){ startDate = ev.date; $('#end-date').datetimepicker('setStartDate', startDate); }); $('#end-date').datetimepicker({ initialDate:endDate, language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0, startDate:startDate, endDate:endDate }).on('changeDate', function(ev){ endDate = ev.date; $('#start-date').datetimepicker('setEndDate', endDate); }); </script> </body> </html>