preventing Date-picker from auto-select a date - javascript

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

Related

How to select whole week on date picker angular material?

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

rc-calendar detect month change in date calendar

rc-calendar: https://github.com/react-component/calendar
Is there a way to detect the change of month on clicking the next/previous buttons as labeled in the image below:
My use case: I need to fetch all the available dates in a month on clicking next month and disable the unavailable dates in that month.
Code: https://codepen.io/sachiv/pen/WBNXLp
PS: There is a prop onChange which detects change only on the selection of a date and not just month change.

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.

Restrict and change select lists values used along jQuery UI's datepicker

I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/

Categories