katemihalikova / ion-datetime-picker

Date and/or time picker for awesome Ionic framework
MIT License
169 stars 101 forks source link

Using datetime-pick to submit as a text value in html forms #45

Closed jeremiasgoh closed 8 years ago

jeremiasgoh commented 8 years ago

Hi, I want to show the text value of {{DOB| date: "yyyy-MM-dd"}} in my form after clicking the dates on the calendar, so when I press submit, my controller will be able to get the string format to sent to backend servlets for processing. However the current the value does not show in the UI after selecting the date on the calendar. Any idea how to solve it?

How can i display the value in form to submit?

<<---register.html---->> <label class="item item-input " id="register-input19"> <span class="input-label">DOB</span> <input type="tel" ion-datetime-picker date ng-model="DOB" value="{{DOB| date: 'yyyy MM-dd'}}" > </label>

<<---controller.js---->>`.controller('registerCtrl', function($scope, $http, $state, $ionicPickerI18n) {

    $scope.DOB = new Date();
    $ionicPickerI18n.weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    $ionicPickerI18n.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    $ionicPickerI18n.ok = "Select";
    $ionicPickerI18n.cancel = "Cancel";
katemihalikova commented 8 years ago

Hi Jeremias,

it is not supposed to be working with an input field. You can't mix two different directives that are using ng-model. Please see #21 for a workaround.

jeremiasgoh commented 8 years ago

can you help me with a working example? I cant find anything in the other thread

On Tue, Jun 28, 2016 at 6:21 PM, Kate Miháliková notifications@github.com wrote:

Closed #45 https://github.com/katemihalikova/ion-datetime-picker/issues/45.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/katemihalikova/ion-datetime-picker/issues/45#event-706136983, or mute the thread https://github.com/notifications/unsubscribe/ARMTFjUekomUwJt8jxixlYvTAdcGDwyaks5qQPWXgaJpZM4I_8To .

katemihalikova commented 8 years ago

Yes, let's prepare a codepen/plunker/whatever demonstrating your issue and I'll take a look

jeremiasgoh commented 8 years ago

Not sure, how I can illustrate clearly with regards to the issue specifically but most importantly, I want to submit the input from that amazing date picker you made, (-----> value="{{DOB| date: 'yyyy MM-dd'}} <---- ) as a text, to my controller, to the backend for processing. Here is the codepen,

https://codepen.io/Zaperano/pen/xOqJYb

I appreciate your help as it for a school project. Thank you!

On Tue, Jun 28, 2016 at 11:41 PM, Kate Miháliková notifications@github.com wrote:

Yes, let's prepare a codepen/plunker/whatever demonstrating your issue and I'll take a look

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/katemihalikova/ion-datetime-picker/issues/45#issuecomment-229089686, or mute the thread https://github.com/notifications/unsubscribe/ARMTFvB5yHC4uCO4umuaDjv6pt-SJwpDks5qQUCVgaJpZM4I_8To .

jeremiasgoh commented 8 years ago

Not sure, how I can illustrate clearly with regards to the issue specifically but most importantly, I want to submit the input from that amazing date picker you made, (-----> value="{{DOB| date: 'yyyy MM-dd'}} <---- ) as a text, to my controller, to the backend for processing. Here is the codepen,

https://codepen.io/Zaperano/pen/xOqJYb

I appreciate your help as it for a school project. Thank you!

On Wed, Jun 29, 2016 at 11:37 AM, Jeremias Goh jeremiasgoh@gmail.com wrote:

Not sure, how I can illustrate clearly with regards to the issue specifically but most importantly, I want to submit the input from that amazing date picker you made, (-----> value="{{DOB| date: 'yyyy MM-dd'}} <---- ) as a text, to my controller, to the backend for processing. Here is the codepen,

https://codepen.io/Zaperano/pen/xOqJYb

I appreciate your help as it for a school project. Thank you!

On Tue, Jun 28, 2016 at 11:41 PM, Kate Miháliková < notifications@github.com> wrote:

Yes, let's prepare a codepen/plunker/whatever demonstrating your issue and I'll take a look

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/katemihalikova/ion-datetime-picker/issues/45#issuecomment-229089686, or mute the thread https://github.com/notifications/unsubscribe/ARMTFvB5yHC4uCO4umuaDjv6pt-SJwpDks5qQUCVgaJpZM4I_8To .

katemihalikova commented 8 years ago

I sure hope you know that the task is easy and you should be supposed to find the answer yourself, right? :)

You can use $scope.DOB.toISOString() in your $scope.register method to get an ISO datetime string usable on server.

As i told you before, you just can't use two different directives using ng-model on one element.

<div ion-datetime-picker date ng-model="DOB">Date of birth: {{DOB| date: 'yyyy MM-dd'}}</div>
jeremiasgoh commented 8 years ago

hi Kate, Thank you :)

On Thu, Jun 30, 2016 at 1:10 PM, Kate Miháliková notifications@github.com wrote:

I sure hope you know that the task is easy and you should be supposed to find the answer yourself, right? :)

You can use $scope.DOB.toISOString() in your $scope.register method to get an ISO datetime string usable on server.

As i told you before, you just can't use two different directives using ng-model on one element.

Date of birth: {{DOB| date: 'yyyy MM-dd'}}

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/katemihalikova/ion-datetime-picker/issues/45#issuecomment-229560825, or mute the thread https://github.com/notifications/unsubscribe/ARMTFu5TC5dcqInfO0RwfNV8AQmtcR0Dks5qQ0_MgaJpZM4I_8To .