Angular从datetimepicker获取日期

Angular get date from datetimepicker

本文关键字：取日期 获取 datetimepicker Angular      更新时间：2024-05-14

我试图从引导程序日期时间选择器中获取日期，但当我将ng模型放在输入字段上时，它不起作用？

html

<!-- EndDate -->
<div class="form-group">
    <label for="dtp_enddate">Eind datum:</label>
    <div class="input-group date" id="dtp_endDate">
        <input type="text" class="form-control" name="EndDate" ng-model="employeeCtrl.employee.EndDate" required="required" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</div>

jquery

   $(function() {
        $('#dtp_endDate').datetimepicker({
            useCurrent: true,
            collapse: true,
            format: 'YYYY-MM-D',
            locale: 'nl',
            allowInputToggle: true
        });
    });

我怎样才能做到这一点？

将angularJS与jQuery插件结合不是最佳实践。有很多插件转换为angularJS指令，您可以尝试使用它们。例如。https://github.com/dalelotts/angular-bootstrap-datetimepicker

如果在单个组件中需要日期-时间选择器，可以使用http://dalelotts.github.io/angular-bootstrap-datetimepicker/或者您可以使用Angular Bootstrap 中的两个组件（日期选择器和时间选择器）

例如

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")

你可以通过$scope.dt获取数据。如果你想观察日期的变化，你可以进行

$scope.$watch('dt',function(val){
   //to do       
   console.log(val)
})

在输入标签中包含id="dtp_endDate"

<input type="text" id="dtp_endDate" class="form-control" name="EndDate" ng-model="employeeCtrl.employee.EndDate" required="required" />
相关文章：