dateRangePicker js 带时间选择器的单个 datePicker
[英]dateRangePicker js single datePicker with time picker
问题描述
I have tried to use date range picker with single date picker and time picker, but the library does not support this option.
我尝试将日期范围选择器与单个日期选择器和时间选择器一起使用，但库不支持此选项。 could you please help to tackle this problem, and the apply and cancel buttons don't appear你能帮忙解决这个问题吗，应用和取消按钮没有出现
// Single Date with time
$('.single-date-time').daterangepicker({
singleDatePicker:true,
timePicker: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
3 个解决方案
解决方案1
0 2020-01-08 12:45:37
Include these libraries on your project moment.js在您的项目moment.js 中包含这些库
daterangepicker.min.js 日期范围选择器.min.js
daterangepicker.css 日期范围选择器.css
you have to add jquery libraries also您还必须添加 jquery 库
in your js file add following code在您的 js 文件中添加以下代码
$('input[name="dates"]').daterangepicker();
$(function() { $('input[name="datetimes"]').daterangepicker({ timePicker: true, startDate: moment().startOf('hour'), endDate: moment().startOf('hour').add(32, 'hour'), locale: { format: 'M/DD hh:mm A' } }); });
and your Html code <input type="text" name="datetimes" />和你的 Html 代码<input type="text" name="datetimes" />
解决方案2
0 2020-01-08 13:16:08
I have tryed your code and setting into a function it it worked.(Libraries of bootstrap and daterangepicker and jquery)我已经尝试了您的代码并将其设置为它可以工作的函数。（引导程序和 daterangepicker 和 jquery 库）
<script>
$(function() {
$('.single-date-time').daterangepicker({
singleDatePicker: true,
timePicker: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
});
</script>
</head>
<body>
<input type="text" class="single-date-time" name="test" />
</body>
解决方案3
0 2020-06-12 17:45:14
Your HTML should look something like this :你的 HTML 应该是这样的：
<input style="width: 100%" date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text" ng-model="dateFilter" options="optsSingleWithTime" autocomplete="off" required/>
Your JS code as follows:你的JS代码如下：
//Get the single Date //获取单个日期
$scope.optsSingleWithTime = {
singleDatePicker: true,
startView: 2,
minViewMode: 2,
opens: 'right',
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(5, 'hour'),
locale: {
label:'Custom Filter',
applyClass: 'btn-green',
applyLabel: "Apply",
fromLabel: "From",
toLabel: "To",
cancelLabel: 'Cancel',
format: 'YYYY-MM-DD HH:mm:ss'
},
changeYear: true,
changeMonth: true,
maxDate: date
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.