ionic 3 DateTime component How to disable future saturdays and sundays - angularjs

I tried creating an ionic form in which the DateTime component is used. I want to disable all future Saturdays and Sundays from the date picker. Is this possible?
My code is given below
<ion-item>
<ion-label>Select Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" min="2018-03-26" max="2020-10-31"></ion-datetime>
</ion-item>
Please help?

Looks like it is not possible to disable particular days (weekends/weekdays) using ion-datetime of ionic3.
Check out documentation for more functions and information:
https://ionicframework.com/docs/api/components/datetime/DateTime/
Alternatively, you can do it with libraries like this : https://github.com/rajeshwarpatlolla/ionic-datepicker

Related

Date Time Picker For ionic 1?

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.

Show only year in angular material datepicker

I was looking at the Angular Material documentation for date picker. I was wondering if there is any way to show only the years in the date picker? Appreciate it if someone could help me out with it.
With md-datepicker Selecting only year is not possible, month year format is possible using md-mode="month".
DEMO
there is a little feint you set the datepicker opened to false , after year selected
chosenYearHandler(normalizedYear: Moment,datepicker: MatDatepicker<Moment>) {
// your code
datepicker.opened = false
}

angular: uib-datepicker locale is not set dynamically

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

Angular Bootstrap DateTimePicker - Highlight Today Date on embedded Calender

Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.
I am using angular-bootstrap-datetimepicker library from the below url:
Link to library
I am currently embedding the calender on the page.
I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.
Here is the sample code:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>
I am trying to highlight today's date automatically when the datetimepicker shows on the page.
As you can see, in the config options, i could set the default view and min view.
Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again.
Here is the link to Plunkr.
Any suggestions (regarding highlight today date by default) will be appreciated.
To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:
$scope.data = { embeddedDate: new Date() };
Working Plunkr

Angular JS formate date

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

Resources