I'm using ionic 1. I need date/time picker component that is the same as implemented in ionic 2.
I found this but it's not free.
I have no idea which date/time picker you have used, but in ionic 1 , you can use their built-in
In your html
<input type="date" data-date="" data-date-format="DD MMMM, YY" value="YOUR_SELECTED_DATE" ng-model="YOUR_DATE_MODAL">
furthermore, If you want to change the format of date you can change it via custom javascript function.
Related
Angularjs-Material v. 1.2.4
Both issue can be reproduced using this demo sample: https://jsfiddle.net/Drasius/z51vgqr6/27/
Angularjs-Material md-datepicker when using ng-model-options="{timezone: 'UTC'}" option input box shows date in local time and Date Picker calendar in UTC time.
There is jsfiddle script with the issue https://jsfiddle.net/Drasius/z51vgqr6/11/
<div id="app">
<div>
<strong>Date in local timezone:</strong>
{{date|date:"yyyy-MM-dd HH:mm Z"}}
</div>
<div>
<strong>Date in UTC timezone:</strong>
{{date|date:"yyyy-MM-dd HH:mm Z":"UTC"}}
</div>
</br>
<md-datepicker required ng-model="date" ng-model-options="{timezone: 'UTC'}" ></md-datepicker>
</div>
JavaScript
date = new Date().setUTCHours(23,0,0,0);
angular
.module('app', ['ngMaterial']);
angular
.bootstrap(document.querySelector('#app'), ['app']);
Found in documentation: https://docs.angularjs.org/api/ng/directive/ngModelOptions#specifying-timezones
Input-type specific options:
timezone: Defines the timezone to be used to read/write the Date
instance in the model for , , ... . It understands UTC/GMT and the continental US time zone
abbreviations, but for general use, use a time zone offset, for
example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian)
If not specified, the timezone of the browser will be used. Note that
changing the timezone will have no effect on the current date, and is
only applied after the next input / model change.
Updated: Upgrading to angular-material 1.2.4 package version it solves initial date selection and now shown date matches, but there still is issue if you change date manually in the input field: jsFiddle sample: https://jsfiddle.net/Drasius/z51vgqr6/27/
Raised issue: https://github.com/angular/material/issues/12149
Issues:
When initial date loaded local date is displayed in calendar and input shows correctly UTC date.
When selecting same date few times - input box and calendar date is out of sync (in calendar local date is displayed - should be UTC)
Both issues is reproducible using this codepen demo: https://codepen.io/Drasius/pen/dyZdvoM
There was issues with angular-material.
Created isssue in angular-material github: https://github.com/angular/material/issues/12149.
some changes was required to my application.
Sadly the lib is end of life and no plans to release new version so forged repo and fixed the issue, you can find fix in this repository https://github.com/vdrasutis/material. So in app instead provided angular package from bower - included my own local copy of angular-material script with my fix.
Hire is sample of gulp task to replace gulp angular-material files with custom local copy (CoffeScript):
jsfiles = plugins.bowerFiles filter: ["**/*.js", "!**/angular-mocks/*.js","!**/angular-material/*.js","!**/angular-material-mocks/*.js"]
# Filtering out angular-material form npm and adding local version of angular-material
jsfiles.push('./src/custom_frameworks/angular-material.js')
jsfiles.push('./src/custom_frameworks/angular-material-mocks.js')
gulp.src jsfiles
.pipe plugins.plumber(errorHandler: plugins.notify.onError("Error: <%= error %>"))
.pipe plugins.if config.releaseMode, plugins.concat "#{config.pkg.name}-frameworks.js"
.pipe plugins.if config.releaseMode, plugins.uglify( { output: { max_line_len: 0 } } )
.pipe plugins.if config.releaseMode, plugins.rev()
.pipe gulp.dest config.dist.assets.frameworksPath
enter code here
Consider the following setup: I have a form with a angular-bootstrap datepicker (uib-datepicker-directive), which I want to serve with different languages, such that dates are shown in different formats.
I am changing the locale dynamically with the angular-dynamic-locale-module, by using information from the state parameters.
A date object is printed with correct language-specific format using the angular date filter: {{vm.date | date:'fullDate'}}
Unfortunately the formatting for the datepicker is not working immediately. When loading the page and call a set-locale function it needs a click into the datepicker to adjust the format of the month and click to the month and back to additionally adjust the translations for the weekdays.
I have created a plunkr to demonstrate the behaviour.
http://plnkr.co/edit/2HA8LI5SzUqx2jSmUdjn?p=preview
Does anyone know this behaviour? And if so, is there a way to fix this, preferably without messing up the datepicker directive?
Thanx in advance, micoud
Is there any directive in Angular, I want to enable user when he write 2/3/67 in input for date date needs to be formatted like 02/03/1967 I tried few things on my own but they didn't work.
Just add a Angularjs formating, when displaying users input like so
{{yourdate.variable | date:'yyyy-MM-dd'}}
Se more at AnguarJS date function
EDIT
Here is working Plunker, with different type of dates. Enjoy
date input is not showing the date until the user change it
// showing the date
<p>{{someDate | date}}</p>
// not showing the date. instead showing mm/dd/yyyy.
// but value will change when use change is
<input type="date" ng-model="someDate">
example code in jsbin
it IS working on version 1.3.0-beta.3, but
I need it to work on stable version 1.2.14.
is it possible?
I've created a simple directive to enable standard input[type="date"] form elements to work correctly with AngularJS ~1.2.16.
Please look here for details:
https://github.com/betsol/angular-input-date
And here's the demo:
http://jsfiddle.net/F2LcY/2/
Hope it helps!
I think the answer is you must upgrade to angularjs 1.3 or newer. Details in angular.js/pull/5864. The commit implementing this is pretty large to try to backport to 1.2 IMHO.
Try converting the someDate scope variable from string to Date format and then if you use input type="date" ng-model="someDate" . This solved my problem .
This is a bit complicated, but I've now verified it with both Angular Scenario tester and Protractor, and in the user interface.
Set up Twitter Bootstrap 3.x (I'm using the latest but had 3.0.3 before) - from the bower boostrap install
Set up Angular UI with the built-in templates (I'm using the angular-ui-bootstrap-bower library from Bower)
Set up a datepicker-popup field in Angular-UI like this:
<label for='due_date'>Due Date</label>
<input id='due_date'
class='form-control'
type='text'
datepicker-options="dateOptions"
datepicker-popup='yyyy-MM-dd'
ng-model="task.dueDate">
Add a button and a controller method to inspect the variable.
Testing:
Click on the date field, and type in a date: 2013-01-05
Hit escape or click on another field to close the popup dialog (i.e. don't click Done)
Submit the form
You'll find the date to be one day behind.
Interestingly, if you click on an actual date in the date picker, it will be correct. Including 'today'. If I remove the ui datepicker, it works fine with persisting the typed-in data. My date format is YYYY-MM-DD when I type it in.
This is maddening, as I've thought it was a bug in Angular Scenario, but once I figured out that Protractor ALSO fails, and that I could reproduce it by canceling the dialog, and even typing and submitting, I am beginning to think it has something to do with localization and timezones.
Anyone else run into this?
Here is a protractor test that fails:
it('should return one task', function () {
thePage.clearTasksButton.click();
thePage.newTaskButton.click();
thePage.taskDescription.clear();
thePage.taskDescription.sendKeys('A new task');
thePage.taskPriority.clear();
thePage.taskPriority.sendKeys('1');
thePage.dueDate.clear();
// pick today and dismiss the Angular DatePicker
thePage.todayButton.click();
thePage.createTaskButton.click();
var task = element.all(by.repeater('task in tasks').row(0).column('dueDate'));
task.then(function(elems) {
// should result in one row
expect(elems.length).toEqual(1); // this works
expect(elems[0].getText()).toEqual('2014-03-19'); // this is 2014-03-18
});
...
Thanks
Ken