Bootstrap daterangepicker创建预设范围

好吧所以我使用的Bootstrap-Daterangepicker几乎是开箱即用的演示。并有选择在那里去搜索最近7天等等...我需要的是选择选择7天，然后选择从日期也许用悬停显示7天你也可以..Bootstrap daterangepicker创建预设范围

和相同的30天。在JS Im相当新手，所以请温柔...

<html> 
    <head> 
<!--THESE ARE THE CORE FILE REQUIRED--> 
     <script type="text/javascript" src="../../thirdparty/jQuery/jquery-1.12.1.min.js"></script> 
     <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="../../thirdparty/Moment/moment.js"></script> 
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" /> 
     <!--<link rel="stylesheet" href="style.css" type="text/css">--> 

<!--THESE FILES ARE FOR THE DATE RANGE PICKER--> 
     <script type="text/javascript" src="../../thirdparty/Bootstrap/bootstrap-daterangepicker-master/daterangepicker.js"></script> 
     <link rel="stylesheet" href="../../thirdparty/Bootstrap/bootstrap-daterangepicker-master/daterangepicker.css"> 

<!--THESE FILES ARE FOR THE TOGGLE SWITCHES--> 
     <script src="../../thirdparty/Bootstrap/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script> 
     <link rel="stylesheet" href="../../thirdparty/Bootstrap/bootstrap-toggle-master/css/bootstrap-toggle.min.css"> 

     <style> 
      #daycheck { 
     float:left; 
     padding-top: 10px; 
     margin-right:6px; 

    } 

td.available:hover:nth-child(-n+7){ 
    color: red !important; 
} 
     </style> 
    </head> 
    <body> 
     <div class="dateandtime"> 
      <div class="dateselector"><input type="text" name="daterange" class="form-control"/></div> 
      <div class="fliterbuttons"> 
       <a class="btn btn-primary" role="button" data-toggle="collapse" href="#DAYSCOLL" aria-expanded="false" aria-controls="DAYSCOLL">Filter Days</a> 
       <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#Timepicker" aria-expanded="false" aria-controls="Timepicker">Time Range Per Day</button> 
        <div class="collapse" id="DAYSCOLL" aria-expanded="true"> 
         <div class="daysofweek"> 
          <div id="daycheck"><input type="checkbox" data-on="Mon" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Tue" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Wed" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Thu" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Fri" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Sat" checked data-toggle="toggle" data-size="small" checked/></div> 
          <div id="daycheck"><input type="checkbox" data-on="Sun" checked data-toggle="toggle" data-size="small" checked/></div> 
         </div> 
        </div> 
       <div class="collapse" id="Timepicker" aria-expanded="true"> 
        <div class="field"> 
         <div class="inputtime">Start 
          <label> 
           <select class="h"> 
            <option>00</option> 
            <option>01</option> 
            <option>02</option> 
            <option>03</option> 
            <option>04</option> 
            <option>05</option> 
            <option>06</option> 
            <option>07</option> 
            <option>08</option> 
            <option>09</option> 
            <option>10</option> 
            <option>11</option> 
            <option>12</option> 
            <option>13</option> 
            <option>14</option> 
            <option>15</option> 
            <option>16</option> 
            <option>17</option> 
            <option>18</option> 
            <option>19</option> 
            <option>20</option> 
            <option>21</option> 
            <option>22</option> 
            <option>23</option> 
           </select> 
          </label> 
          <label> 
           <select class="i"> 
            <option>00</option> 
            <option>01</option> 
            <option>02</option> 
            <option>03</option> 
            <option>04</option> 
            <option>05</option> 
            <option>06</option> 
            <option>07</option> 
            <option>08</option> 
            <option>09</option> 
            <option>10</option> 
            <option>11</option> 
            <option>12</option> 
            <option>13</option> 
            <option>14</option> 
            <option>15</option> 
            <option>16</option> 
            <option>17</option> 
            <option>18</option> 
            <option>19</option> 
            <option>20</option> 
            <option>21</option> 
            <option>22</option> 
            <option>23</option> 
            <option>24</option> 
            <option>25</option> 
            <option>26</option> 
            <option>27</option> 
            <option>28</option> 
            <option>29</option> 
            <option>30</option> 
            <option>31</option> 
            <option>32</option> 
            <option>33</option> 
            <option>34</option> 
            <option>35</option> 
            <option>36</option> 
            <option>37</option> 
            <option>38</option> 
            <option>39</option> 
            <option>40</option> 
            <option>41</option> 
            <option>42</option> 
            <option>43</option> 
            <option>44</option> 
            <option>45</option> 
            <option>46</option> 
            <option>47</option> 
            <option>48</option> 
            <option>49</option> 
            <option>50</option> 
            <option>51</option> 
            <option>52</option> 
            <option>53</option> 
            <option>54</option> 
            <option>55</option> 
            <option>56</option> 
            <option>57</option> 
            <option>58</option> 
            <option>59</option> 
           </select> 
          </label> 
         </div> 
         <div class="inputtime">End 
          <label> 
           <select class="h"> 
            <option>00</option> 
            <option>01</option> 
            <option>02</option> 
            <option>03</option> 
            <option>04</option> 
            <option>05</option> 
            <option>06</option> 
            <option>07</option> 
            <option>08</option> 
            <option>09</option> 
            <option>10</option> 
            <option>11</option> 
            <option>12</option> 
            <option>13</option> 
            <option>14</option> 
            <option>15</option> 
            <option>16</option> 
            <option>17</option> 
            <option>18</option> 
            <option>19</option> 
            <option>20</option> 
            <option>21</option> 
            <option>22</option> 
            <option>23</option> 
           </select> 
          </label> 
          <label> 
           <select class="i"> 
            <option>00</option> 
            <option>01</option> 
            <option>02</option> 
            <option>03</option> 
            <option>04</option> 
            <option>05</option> 
            <option>06</option> 
            <option>07</option> 
            <option>08</option> 
            <option>09</option> 
            <option>10</option> 
            <option>11</option> 
            <option>12</option> 
            <option>13</option> 
            <option>14</option> 
            <option>15</option> 
            <option>16</option> 
            <option>17</option> 
            <option>18</option> 
            <option>19</option> 
            <option>20</option> 
            <option>21</option> 
            <option>22</option> 
            <option>23</option> 
            <option>24</option> 
            <option>25</option> 
            <option>26</option> 
            <option>27</option> 
            <option>28</option> 
            <option>29</option> 
            <option>30</option> 
            <option>31</option> 
            <option>32</option> 
            <option>33</option> 
            <option>34</option> 
            <option>35</option> 
            <option>36</option> 
            <option>37</option> 
            <option>38</option> 
            <option>39</option> 
            <option>40</option> 
            <option>41</option> 
            <option>42</option> 
            <option>43</option> 
            <option>44</option> 
            <option>45</option> 
            <option>46</option> 
            <option>47</option> 
            <option>48</option> 
            <option>49</option> 
            <option>50</option> 
            <option>51</option> 
            <option>52</option> 
            <option>53</option> 
            <option>54</option> 
            <option>55</option> 
            <option>56</option> 
            <option>57</option> 
            <option>58</option> 
            <option>59</option> 
           </select> 
          </label> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
<!--THIS NEEDS TO BE PLACED SOMEWHERE ELSE--> 
<script type="text/javascript"> 
$(function() { 
    $('input[name="daterange"]').daterangepicker({ 
    "timePicker": true, 
    "timePicker24Hour": true, 
    "timePickerSeconds": true, 
    "autoApply": true, 
    "ranges": { 
      'Today': [moment(), moment()], 
      '7 Days': [moment(), moment().add(6, 'days')], 
      '30 Days': [moment(), moment().add(29, 'days')], 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 90 Days': [moment().subtract(89, 'days'), moment()], 
      'Current Month': [moment().startOf('month'), moment().endOf('month')] 
     }, 
    "locale": { 
     "format": "DD/MM/YYYY", 
     "separator": " - ", 
     "applyLabel": "Apply", 
     "cancelLabel": "Cancel", 
     "fromLabel": "From", 
     "toLabel": "To", 
     "customRangeLabel": "Custom", 
     "weekLabel": "W", 
     "daysOfWeek": [ 
      "Su", 
      "Mo", 
      "Tu", 
      "We", 
      "Th", 
      "Fr", 
      "Sa" 
     ], 
     "monthNames": [ 
      "January", 
      "February", 
      "March", 
      "April", 
      "May", 
      "June", 
      "July", 
      "August", 
      "September", 
      "October", 
      "November", 
      "December" 
     ], 
     "firstDay": 1 
    }, 
    "alwaysShowCalendars": true, 
    "startDate": moment().subtract(29, 'days'), 
    "endDate": moment() 
}, function(start, end, label) { 
    console.log("New date range selected: ' + start.format('DD-MM-YYYY') + ' to ' + end.format('DD-MM-YYYY') + ' (predefined range: ' + label + ')"); 
}); 
});</script> 
    </body> 
</html>

来源

2016-11-07 Michael Chappell

你到目前为止尝试过什么吗？ – Aer0

我已经尝试了不同的方法适应时刻为不同的预先定义的范围添加和减去一天，但不知道如何使它进入控制或从日期点击设置兰特:( –

嗯，我应该更精确。已经提供代码，所以我们可以帮你 – Aer0

我甲肝使用一个jQuery选择器，我再重复的分钟做秒，现在解决了这个......和所有其他功能扩充，帮助不再需要。

来源

2016-12-20 07:04:16

好吧，你可以包括*更多信息*，例如包括相关的代码，所以未来的读者可以实际*使用*你的解决方案。 –

我会把更多的东西放在一起来解释这一点，但我基本上重复每个参考分钟，并重新命名为第二。 –

Bootstrap daterangepicker创建预设范围

回答

相关问题