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創建預設範圍

回答

相關問題