Date picker in ionic

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.


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

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

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) {

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

$scope.fetchAppointmentsFromService = function () {



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


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

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:

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


$scope.fetchAppointmentsFromService = function(appointData){
    var temp = angular.copy(appointData);

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

No problem. My pleasure!
Watch this for more info :