修复 AngularJS datetimepicker,对两个输入使用相同的日期有一个错误

Fixing AngularJS datetimepicker, using the same date for two inputs has a bug

我正在为 AngularJS 使用 this 日期时间选择器。我的要求是我必须有一个日期和一个单独的时间输入。到目前为止效果很好。

现在真正的问题是,当我选择了日期和时间然后更改日期时,它会覆盖时间。因此,当我的时间为 12:05:00 时,它将被重置为 00:00:00,因为 datetimepicker 生成日期但显然忽略了时间,它只是跳过该部分,因为它认为您只需要年、月和日。

Plunker

  <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)"
/>

http://plnkr.co/edit/TTVC9aBCoQY1Dcm0nryY?p=preview