bootstrap datetimepicker 时间段选择限制

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>Testlegend>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Pickinglabel>
                <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 Pickinglabel>
                <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>

 

转载于:https://www.cnblogs.com/rubekid/p/5477193.html

你可能感兴趣的:(bootstrap datetimepicker 时间段选择限制)