In my ionic app, I have a timepicker, how can I set the default time to be displayed as 10am ?
This field will be displaying the data from database if any, or as a new field to be saved.
Below is my html code
<div class="fortimepicker" ion-datetime-picker ng-model="ship.fromtimeValue">{{ship.fromtimeValue| date: "yyyy-MM-dd hh:mm a"}}</div>
You can set your default time in the angular ng-modal like
<div class="fortimepicker" ion-datetime-picker ng-model="fromtimeValue">{{fromtimeValue | date: "yyyy-MM-dd hh:mm a"}}</div>
and set the ng-model in js like:
$scope.fromtimeValue = new Date("October 13, 2014 10:00:00");//or the default date-time you want set
After this if you open the picker it will come with the default time '10:00'
If you want to check the working example i have added your code in the codepen ion-datepicker demo : http://codepen.io/anon/pen/JXvWdQ , where you can check the first line which comes with 10:00 as default time
Related
I have tried to change the value of selection in angular material date picker to YYYY-MM-DD format as follows:
In dateInput event of the field I call a function which will change the format of date using date pipe and set value back. However, the format doesnt change.
HTML Code
<input matInput placeholder="Stop Date" [matDatepicker]="stopDate" (dateInput)="OnStopDate($event.value)" formControlName="stopDate">
<mat-datepicker-toggle matSuffix [for]="stopDate"></mat-datepicker-toggle>
<mat-datepicker #stopDate></mat-datepicker>`
TS Code
`OnStopDate(Value){
const update= this.datepipe.transform(Value, 'YYYY-MM-dd'); //this value is being update
this.myForm.controls.stopDate.setValue(update,{emitEvent: false}); // the value is not being set in yyyy-mm-dd but in mm-dd-yyyy
}
I did see a solution provided using MomentDateAdapter as here. Is this the only solution proceed and why ?
i write the following coding to print the current date time
$scope.date = new Date();
and then i print the same using consol.log
console.log($scope.date);
and it is working fine
Tue Jan 24 2017 16:36:06 GMT+0530 (India Standard Time)
but now i want to change the date format and i want to print like
21-12-2016
can anybody help me here?
i used the conversion but i am unable to remember the page or the url of the page right now,
and stuck on this,
before i leave for the home today i thought of solving this issue
In controller you can do
$filter('date')(date, format, timezone)
to change the date format. And in html,
{{ date_expression | date : format : timezone}}
use this.
Like
$scope.formattedDate = $filter('date')($scope.currDate, "dd-MM-yyyy");
to print same on html
{{ currDate | date : "dd-MM-yyyy"}}
https://docs.angularjs.org/api/ng/filter/date
Following formats are supported by angular.
You can do this either in controller or in html page.
$scope.date = new Date();
The first one is :
$scope.date = $filter('date')($scope.date, 'dd-MM-yyyy');
Second one is :
{{date | date:'dd-MM-yyyy'}}
You can use the Angular date filter:
{{date | date: 'dd-MM-yyyy'}}
You can use the in-build js libraries functions i.e getDay(), getHours(), getMinutes(), getMilliseconds(). This functions will return you the corresponding date's individual components values.
e.g
var x = $scope.yourDateModelObj.getHours();
Likewise, you can get the date, month, years values.
return an integer value for hours.
Hope that helps
I am developing android application using Cordova and ionic framework ,in which i am using Html 5 date type to get the date its works fine.
Now i want to select the time along with the date (ie user can select the time )
is it possible with html5 date type ??
Here is my code
<input type="date" ng-model="meetingData.enddate" />
$scope.submitForm=function(meetingData){
console.log(meetingData.enddate);
}
<input type="date"> does not have a feature to let pick time by user. You can set the current time as default through this whereas the date is selected by user.
var hour = new Date().getHours();
var mins = new Date().getMinutes();
$scope.meetingData.enddate.setHours(hour);
$scope.meetingData.enddate.setMinutes(mins);
Demo
Alternatively, You should look into ui-timepicker and ui-datepicker.
I have a number which represents the time in miliseconds since 1970 eg.
1388664300000
with:
{{ day.date | date: "dd.MM.yyyy" }}
it will render 07.05.2015 ! So far so good. Now I like to insert the same data into my input field:
<input type="date" ng-model="day.DUTY">
to let the user adjust the date.
Nothing is displayed because the input field requires an date object !
I have created a filter to change my number to date:
var DateFilter = function() {
return function(data){
date = new Date(data);
return date;
}
}
But I can't figure it out how to combine this with my input field. Maybe this isn't the right approach ? Any ideas ?
Take a look at How to bind View Date to model milliseconds with Angularjs.
As it explained; You can use the following, to change the data format dynamically during the binding:
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);
I'm using angular-pikaday plugin (https://github.com/nverba/angular-pikaday) and I have a problem with a date formatting.
What I need to get is a model with a string of date in format YYYY-MM-dd.
I've installed Moment.js through bower (as documentation says that it's needed). Part of code looks like this (angular-pikaday.coffee)
picker = new Pikaday(
field: elem[0]
trigger: document.getElementById(attrs.triggerId)
bound: attrs.bound isnt "false"
position: attrs.position or ""
format: "YYYY-MM-dd" # Requires Moment.js for custom formatting
defaultDate: new Date()
setDefaultDate: attrs.setDefaultDate is "true"
firstDay: 1
( ... )
How can I put formatted date inside ng-model passed in HTML?
Date = {{ myPickerObject.getDate() | date:'YYYY-MM-dd' }}
UPD:
$filter('data')(myPickerObject.getDate(), 'YYYY-MM-dd' )