How to select whole week on date picker angular material? - javascript

I want to select whole week on date picker with highligted on calander and want to choose first date of a week as values.
Eg if I select thursday select or highlight whole week from monday to sunday and restrict to overlap dates .
here is sample image

See the stackblitz link with the answer to your question.
Stackblitz Example

Related

Angular Material Datepicker Highlight Range Week Start to Week End

I need users to pick a beginning week and an ending week since the data being returned in a range of start week to end week.
I am attempting to highlight the entire week on any date picked on start date range and highlight the entire end week selecting the last day in the end week.
I am using a date range picker and the highlight works fine and inputs the start day of the week and the last day in the end week... but i cant understand how to highlight it in the picker. Instead, the picker shows the mid week day a the start of the selected dates not the beginning day of thee week/
I want my users to select a start and end week.
I have created a dateClass and a method but i am unable to set the week range to a color.
Reproduction
Here's the stackblitz:
https://stackblitz.com/edit/angular-ucvaay?file=src/app/date-range-picker-overview-example.html
Steps to reproduce:
Click the calendar - click a date that is not a weekend or the beginning day of the week
the input will update the value to the beginning day of the week and when an end day is selected it will get the last day in the end date week (as expected)
The issue: Open the datepicker again and notice that highlighted date range does not include the beginning days (entire week highlighted nor the end week highlighted.
I need users to pick a beginning week and an ending week since the data being returned in a range of start week to end week.
Any idea on how to get the start and end week to select like the range selection?
You can add a FormGroup to your datepicker which gives you the ability to change the values of the start and end date. In your dateRangeChange()-method you could then update the selected values to the beginning and end of the week. I added the functionality to your Stackblitz-project: https://stackblitz.com/edit/angular-ucvaay-8brpty?file=src/app/date-range-picker-overview-example.ts

preventing Date-picker from auto-select a date

I am using and readonly datepicker (bootstrap) with disabled weekends and public holidays. When selecting a month/ year however it always selects the first day of the month or year and only moves on to the date selection if this first day is an invalid. The datepicker modal opens initially with the current day (which is also an invalid day ..on purpose) so it let me select an day but ones i go to month or even years before selecting a day of the current month, it populates it with the default of the first day of the month/year. is there a way to prevent this from happing and only updates the date ones day, month and year has been selected by the user.
Use setDate method you can clear input field state this way:
$("#datepicker").datepicker();
$("#datepicker").datepicker('setDate', null);
Try this code:
$('#datepicker').val('').datepicker('update');
Or
$('.datepicker').datepicker('update', '');
Source

Bootstrap datepicker: Start picking date from year

Normally when selecting dates from immediate vicinity of 'today', default behaviour (picking a day of month) works well but when picking birthdays I want the user to start picking the date from years. I looked at the docs but couldn't find any option to do this. I want the datepicker to open with years selection first. As shown in this picture:
I'm using this plugin: https://bootstrapdatepicker.readthedocs.io/en/latest/
Use startView option (0-days, 1-months, 2-years, see plugin docs):
$('#date').datepicker({
startView:2//
});

AngularUI Datepicker day and month ONLY

I've seen answers concerning jquery but not angular ui. I would like to display only days and months. I've found this and can set a min date (1.1.2014) and max date (31.12.2014) but in the picker I still see the year beside the month and if I click on the year, I get a not relevant view.

How to select each visible day, which are not part of the current visible month?

I have a problem. I should work with the RichFaces calendar component so I can select each day, which are visible for a current selected month, but that is not possible.
An example:
I selected the month march and now I can see some days of the month February and some day of the month April. And this days i want selected.
I found in the RichFaces Documentation that boundaryDatesMode attribute can be controlled but my solution isn't successful. I tried setting this attribute with value "active" or "inactive" but nothing happens.
Can somebody help me to solve my problem?
//EDIT
I work with JSF 1.2 und RichFaces 3.3.3
Sorry, but my english knowledges are not very good.
There is no active value in boundaryDatesMode attribute for selecting previous, next months dates.
Write select value in attribute boundaryDatesMode.
<rich:calendar boundaryDatesMode="select" ></rich:calendar>
It works for selecting previous and next months dates on current displayed calender popup.

Categories