I want to display 3 dropDowns : day,month, and year.
in order to select a birthDay.
Angular.ui datePicker has no this option.Is there any other way to do it?
You could make use of angular-date-dropdowns library or Combodate library
I would prefer you use angular-date-dropdowns.. Here is an example:
<input rsmdatedropdowns ng-model="dob" />
Related
I want to custumize my DatePicker and only show days cause i want the user to choose one or multiple day from 1 to 31 with ignoring the month and the year
I am using the date picker from "react-multi-date-picker"
<DatePicker
id={"startDate"}
className="form-control"
multiple
format="DD"
/>;
You could use a dropdown or select instead.
You can add following props as below
<DatePicker
id={'startDate'}
className="form-control"
multiple
format="DD"
buttons={false}
disableYearPicker
disableMonthPicker
/>
The prop button={false} helped, and I hid the month and the year too.
Finally, it's exactly as I wanted:
<DatePicker
id={"startDate"}
value={editedDates}
className="form-control"
multiple
format="DD"
buttons={false}
disableYearPicker
disableMonthPicker
hideMonth
hideYear
hideWeekDays
/>
date picker with only days
Is there a possibility to also use $parser and $formatter for an input field and not only for a directive?
This is my input field (AngularJs DateTimePicker)
<input type="text"
class="form-control date"
name="date"
data-ng-model="vmModal.account.creationDate"
datepicker-popup="dd.MM.yyyy"
is-open="vmModal.openedDatePicker"
close-text="schließen"
current-text="heute"
clear-text="löschen"
datepicker-options="{startingDay: 1}"
placeholder="Datum">
[EDIT]
Actually I don't know what to do, I need the string representation of the date because I show it elsewhere in the application. The only possibility I know would be to have another field in my javascript object which represents a date object.
I may have miss-understood your problem, but from your EDIT, it seems that you need to display or use the date selected through the input in some other place. This is standard stuff to have one model and several views. In your case, you can just display vmModal.account.creationDate with a different format as the one used in the datepicker, using the angular date filter.
E.g. when you select the following date in the datepicker: 25.12.2016
<em>{{vmModal.account.creationDate | date:'EEEE, dd MMMM yyyyy' }}</em>
shall display
Sonntag, 25 Dezember 2016
See the plunker in action.
Note that you can specify alternate date formats for manual entry. In the plunker I added alt-input-formats="['dd/MM/yy']". The user can now enter 25.12.2016 or 25/12/16, both formatted dates will be parsed as date objects.
Is it possible to use ng-paste component on select components?
I can put it working on text componentes, but I want to do the same on Select Box. Imagine that I want 10 rows, if I paste the 9th value the ideal is to select them.
plunkr example :
<select ng-model="myselect" ng-options="o for o in options" ng-paste="paste2()" ></select>
plunk
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example
I forked the Plunker code from the AngularUI Bootstrap pages (the Datepicker example). I wanted to implement a max date range so you can only select a date in a certain period. You can find the Plunker here: http://plnkr.co/edit/vBrgyC20FBEUzuoprhlh?p=preview
Somehow, the maxDate attribute does not seem to be working while the minDate one does. Does anyone know if I'm doing something wrong here or if it's just a bug?
Your HTML in the plunker
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
What it should have been
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Seems you just forgot to add the max-attribute?
You have two date pickers in there. :)
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Worked for me as well, i was struggling with the attribute max-date", Thanks ivarni for your answer