Bootstrap daterangepicker Erstellen Pre Set Ranges

Ok Also ich benutze den Bootstrap-Parameterpicker so ziemlich aus der Box als Demo. und es gibt Optionen auf dort, letzte 7 Tage usw. ect zu suchen ... Was ich brauche, ist Wahl, 7 Tage auszuwählen, dann wähle das von Datum vielleicht mit einem Hover, der zeigt, wo 7 Tage dich auch nimmt dasselbe für 30 Tage. Im ziemlich Neuling auf JS so seien Sie sanft ...Bootstrap daterangepicker Erstellen Pre Set Ranges

<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>

Quelle

2016-11-07 Michael Chappell

Haben Sie schon einmal etwas versucht? – Aer0

Ich habe verschiedene Methoden der Anpassung des Moments zu addieren und subtrahieren Tag für verschiedene vordefinierte Bereiche, aber keine Ahnung, wie man es in ein Steuerelement oder setzen Rand vom Datum angeklickt :( –

Nun, ich sollte genauer sein. Auf SO Sie Ich habe die Möglichkeit, Ihnen Code zu geben, damit wir Ihnen helfen können. – Aer0

I hav das jetzt gelöst ... ein jquery Wähler, die ich dann die Minuten dupliziert Sekunden zu tun und auf allen anderen Funktionen erweitert, so Hilfe wird nicht mehr benötigt.

Quelle

2016-12-20 07:04:16

gut, Sie könnten * ein wenig mehr Informationen * einschließen, B. den relevanten Code einbeziehen, damit zukünftige Leser * Ihre Lösung tatsächlich * verwenden * –

Ich werde etwas Substantielleres zusammensetzen, um dies zu erklären, aber ich habe im Grunde jedes Ref in Mins dupliziert und auf Second umbenannt. –

Bootstrap daterangepicker Erstellen Pre Set Ranges

Antwort

Verwandte Themen