CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
H4p7ic
H4p7ic

Reputation: 1913

datetimepicker - Passing date value to angular controller

First off i just want to say i have just started with Angular so all this is really new to me. I don't even know if what i am setting up is done in the right way.

What i am trying to do is to Pass a date value after i have chosen it in the datetimepicker back to my angular controller so that i can process it.

the problem i have is that when i choose the date (i can clearly see what i have chosen through a alert poping up displaying it on.change) i can't pass the value through either ng-model attribute in the input tag nor with ng-click after storing the date value in a variable.

i want the date to be passed to a $scope.chosenDate = ''; as a string, or something like that, in the Angular Controller.

I am Using the: DateTimePicker Bootstrap 3 - minimal setup version: DateTimePicker Bootstrap 3

Here is the 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>

Upvotes: 2

Views: 3426

Answers (3)

H4p7ic
H4p7ic

Reputation: 1913

So i got this to work but i got to use another Datetimepicker.

I used the: dalelotts/angular-bootstrap-datetimepicker

Worked like Magic!

Upvotes: 1

Paulson Peter
Paulson Peter

Reputation: 574

You can access the data by adding model variable.

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

in your controller, you can access it through $scope.data.date.

Upvotes: 0

Ankit vadariya
Ankit vadariya

Reputation: 1263

1) You are doing wrong way. Select any angular js supported date picker

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

2) Angular js support two way binding. please read more about two way binding. and then you are good to start with variables in angular js

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

Upvotes: 1

Related Questions