修复 AngularJS datetimepicker,对两个输入使用相同的日期有一个错误
Fixing AngularJS datetimepicker, using the same date for two inputs has a bug
我正在为 AngularJS 使用 this 日期时间选择器。我的要求是我必须有一个日期和一个单独的时间输入。到目前为止效果很好。
现在真正的问题是,当我选择了日期和时间然后更改日期时,它会覆盖时间。因此,当我的时间为 12:05:00 时,它将被重置为 00:00:00,因为 datetimepicker 生成日期但显然忽略了时间,它只是跳过该部分,因为它认为您只需要年、月和日。
<body ng-controller="TestController">
<div class="row">
<div class="col-md-6">
<label>Start Date</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
restrict-input
date-parser="YYYY-MM-DD"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
/>
</ul>
</div>
<label>Start Time</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startTime" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
date-parser="HH:mm:ss"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-on-set-time="onTimeSet(newDate, oldDate, 'start_date')"
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'hour', dropdownSelector: '#startTime' }"
/>
</ul>
</div>
</div>
</div>
<pre>{{task | json}}</pre>
</body>
我很确定问题出在 dateFactory line 168. To be more specific, when you debug the date values around line 286 中的某个地方,它似乎在那里丢失了。是的,在 "hour" 函数中,不是您期望的日期。在我看来,指令正在传递状态,当它到达小时时,它将检测到 maxView 是一天并设置时间。
我现在的问题很简单,就是我无法弄清楚问题到底出在哪里。对此的任何帮助表示赞赏。
可以将类似这样的内容添加到您的范围:
$scope.onSetDate = function(newDate, oldDate) {
if (typeof oldDate == 'string') {
oldDate = new Date(oldDate);
}
newDate.setHours(oldDate.getHours());
newDate.setMinutes(oldDate.getMinutes());
newDate.setSeconds(oldDate.getSeconds());
}
在你的 html:
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
on-set-time="onSetDate(newDate, oldDate)"
/>
我正在为 AngularJS 使用 this 日期时间选择器。我的要求是我必须有一个日期和一个单独的时间输入。到目前为止效果很好。
现在真正的问题是,当我选择了日期和时间然后更改日期时,它会覆盖时间。因此,当我的时间为 12:05:00 时,它将被重置为 00:00:00,因为 datetimepicker 生成日期但显然忽略了时间,它只是跳过该部分,因为它认为您只需要年、月和日。
<body ng-controller="TestController">
<div class="row">
<div class="col-md-6">
<label>Start Date</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
restrict-input
date-parser="YYYY-MM-DD"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
/>
</ul>
</div>
<label>Start Time</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startTime" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
date-parser="HH:mm:ss"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-on-set-time="onTimeSet(newDate, oldDate, 'start_date')"
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'hour', dropdownSelector: '#startTime' }"
/>
</ul>
</div>
</div>
</div>
<pre>{{task | json}}</pre>
</body>
我很确定问题出在 dateFactory line 168. To be more specific, when you debug the date values around line 286 中的某个地方,它似乎在那里丢失了。是的,在 "hour" 函数中,不是您期望的日期。在我看来,指令正在传递状态,当它到达小时时,它将检测到 maxView 是一天并设置时间。
我现在的问题很简单,就是我无法弄清楚问题到底出在哪里。对此的任何帮助表示赞赏。
可以将类似这样的内容添加到您的范围:
$scope.onSetDate = function(newDate, oldDate) {
if (typeof oldDate == 'string') {
oldDate = new Date(oldDate);
}
newDate.setHours(oldDate.getHours());
newDate.setMinutes(oldDate.getMinutes());
newDate.setSeconds(oldDate.getSeconds());
}
在你的 html:
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
on-set-time="onSetDate(newDate, oldDate)"
/>