引导daterangpicker创建预设范围
Bootstrap daterangepicker creating Pre Set Ranges
好了，我使用了Bootstrap-Daterangepicker作为演示。上面有搜索过去7天的选项等等…我需要的是选择7天的选项，然后选择从日期可能与悬停显示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>
我现在已经解决了这个…使用jquery选择器，然后将分钟复制到秒，并扩展到所有其他特性，因此不再需要帮助。
相关文章：
- 从指定范围创建字符数组
- 如何创建一个方法来验证数组的范围
- 将值添加到使用_.map&_创建的变量中.范围
- 我怎样才能创建一个函数expr;t继承词法范围
- 使用javascript中的var关键字创建块范围的变量
- 使用范围作为 id 在传单中创建地图
- 我可以设置这个吗'某事'在该服务中动态创建的嵌套对象中的服务?(可能是范围问题）
- 需要创建一个函数，将我自己创建的范围对象转换为字符串
- Google Sheets-使用脚本创建范围(行）
- 如何创建带有多个标记的谷歌地图，从当前位置到10公里的矩形范围
- 创建新的范围示例
- HTML5:如何创建一个“;范围输入类型“;具有动态值
- 如何在范围内创建全局函数
- 如何使用CSS3和Javascript创建双范围滑块
- Jquery范围滑块如何创建自己的序列
- 在多个节点上创建范围
- 创建可在任何地方使用的 JS 函数?范围和功能“未定义”的问题
- 创建高图表点击功能时丢失了 Angularjs 范围
- 创建使用用户输入的数字范围生成的随机数.(JavaScript）
- JavaScript 全局不保留范围?创建自动完成 Web 服务 JSON 对象
