datetimepicker - 将日期值传递给角度控制器

时间:2016-11-16 08:46:04

标签: javascript jquery angularjs twitter-bootstrap

首先,我只是想说我刚刚开始使用Angular所以这对我来说真的很新。我甚至不知道我所设置的是否以正确的方式完成。

我想要做的是在我在datetimepicker中选择它之后传递一个日期值回到我的角度控制器,以便我可以处理它。

我遇到的问题是,当我选择日期时(我可以清楚地看到我通过弹出的警告选择了什么来显示它。更改)我无法通过输入中的任何ng-model属性传递值将日期值存储在变量中后,也可以使用ng-click。

我希望在Angular Controller中将日期作为字符串或类似内容传递给$scope.chosenDate = '';

我正在使用:DateTimePicker Bootstrap 3 - 最小安装版本: DateTimePicker Bootstrap 3

这是datetimepicker:

    <div class="col-lg-12 col-md-6">
            <lable class="lfInputLable">From</lable>
            <div class="form-group" style="margin-bottom: 5px !important;">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var dateToPass;
            $(document).ready(function dateFunction() {
                $('#datetimepicker1').datetimepicker({
                    format: 'YYYY-MM-DD hh:mm'
                });
                $('#datetimepicker1').on("dp.change", function () {
                    var selectedDate1 = $("#datetimepicker1").data('date').toString();
                    var dateToPass = selectedDate1.toString();
                    alert("Date is set to: " + selectedDate1);
                    alert("The Date To Pass: " + dateToPass)
                });
            });            
        </script>
 

3 个答案:

答案 0 :(得分:1)

1)你做错了。选择任何角度js支持的日期选择器

https://github.com/720kb/angular-datepicker

2)Angular js支持双向绑定。请阅读有关双向绑定的更多信息。然后你可以从角度js中的变量开始

http://www.w3schools.com/angular/angular_databinding.asp

答案 1 :(得分:1)

所以我让这个工作,但我得使用另一个Datetimepicker。

我使用了:dalelotts/angular-bootstrap-datetimepicker

像魔术一样工作!

答案 2 :(得分:0)

您可以通过添加模型变量来访问数据。

<input type='text' class="form-control" ng-model="data.date" />

在您的控制器中,您可以通过$ scope.data.date访问它。