0

好的,所以我使用的 Bootstrap-Daterangepicker 几乎是开箱即用的演示。并且有选项可以搜索过去 7 天等。

30天也一样。我是JS的新手,所以请温柔...

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

1 回答 1

0

我现在已经解决了这个...

于 2016-12-20T07:04:16.303 回答