Date picker in ionic

ionic-v1
1

I read here on forum that when ever there is need to use date picker, we can use

<input type="date"  placeholder="23/1/2015" ng-model="dt" >

which actually is working fine, I tested build on iOS simulator. But problem which I am facing is,
I would like to access updated/changed value i.e date which user has selected.
I was googling around from almost 3 hours now and found that I need to add my own directive. I am not sure about how to do this, or is there anyway to get access to updated value in the model itself.

Thanks.

2

Not sure I understand what you’re asking.
Any chance you could create a codepen to show this?

3

New to codepen, unable to make one using angular…
Adding screen shot and I hope that will help you understand the situation

image
Here I have date picker on view and I would like to have access to date the selected in controller once user click on show button.

I tried to access it within controller like this
code in controller.js

// Controller for Dr Appointment Page
.controller(‘DrAppointmentCtrl’, function ($scope, $ionicLoading, $http, $ionicPopup, $location) {

$scope.today = function () {
    $scope.dt = new Date();
};
$scope.today();
$scope.formats = ['yyyy-MM-dd','dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];



    
$scope.fetchAppointmentsFromService = function () {
    alert($scope.dt);

};

})

and inside view (html file)

                            <input type="date" id="dateChoosen" value="{{dt}}" placeholder="23/1/2015" ng-model="dt">
                       
                        <button class="button button-positive" ng-click="fetchAppointmentsFromService()">
                            Show
                        </button>

                    </div>

I did bind dt from controller to input type date and on click of button I am trying to access value of dt from model like this
alert($scope.dt);

but I am unable to get updated value of model, I keep getting date which I set during init.

Precisely I am unable to get updated model value which is being updated by date picker input control. :smiley:

4 
 <input type="date" id="dateChoosen" value="{{dt}}" placeholder="23/1/2015" ng-model="appoint.dt">
 <button ng-click="fetchAppointmentsFromService(appoint)">Show</button>

Controller

$scope.fetchAppointmentsFromService = function(appointData){
    var temp = angular.copy(appointData);
    console.log(temp);
}
2 Likes
5

surprisingly it worked @siddhartha thanks… I spent lot of time to solve this problem,

6

No problem. My pleasure!
Watch this for more info : https://www.youtube.com/watch?v=G5MzkDJQkoQ