Antd calendar change month on day cell click - javascript

If you work with Calendar component from 'antd', then you mentioned that when you click the day of previous/next month, it will change the month automatically.
How to prevent this behaviour?
https://ant.design/components/calendar/#header

1. Disable dates
You can disable dates that not in current month. This should prevent clicking on them.
<Calendar value={selectedDate} disabledDate={disabledDate} />
disabledDate = currentDate => {
return currentDate.isSame(this.selectedDate, 'month'))
};
2. Prevent selecting
In case you want more control. You can set value manually with onSelect checking if current selected date is in current month.
<Calendar value={selectedDate} onSelect={this.onSelect} />
onSelect = date => {
if (date.isSame(this.selectedDate, 'month')) {
this.setState({
selectedDate: date,
});
}
};
Note
In this examples dayjs is used and supposed you followed
How to use Calendar with customize date library like dayjs

Related

Material Ui - Date Textfield disable date

How to disable dates between Min and Max dates in material UI date textField?
Example, Let's say minimum date is today's date 01/30/2023 and maximum date is next month's date 02/30/2023. I want to disable 01/31/2023, 02/01/2023 and 02/02/2023 dates in the calendar.
My code is:
<TextField
variant="outlined"
id={row?.id}
size="small"
onKeyPress={(e) => {
e.preventDefault()
}}
type="date"
inputProps={{
min: "01-30-2023",
max: "02-30-2023"
}}
></TextField>
Please help me to find the solution.
I think by using TextField with type='date', it's rendering just a text field and you are relying on browser native datepicker, using which it's difficult to achieve what you want. Instead if you change to DatePicker from mui, it has a property shouldDisableDate, which takes a function, where you can add the logic to disable specific date.
You can use mui datepicker and minDate and maxDate props
sth like this :
const [selectedDate,setSelectedDate] = useState();
return (
<DatePicker
placeholder="MM-DD-YYYY"
format={'MM-DD-YYYY'}
maxDate="02-30-2023"
minDate="01-30-2023"
value={selectedDate}
onChange={(date)=>setSelectedDate(date)}
animateYearScrolling={false}
autoOk={true}
clearable
/>
);

jquery datepicker should not automatically change time value on update minDate or maxDate

I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent

jQuery UI monthpicker should close when month is selected

I have this monthpicker based on datepicker plugin: http://jsfiddle .net/ um65otbn/
On the original datepicker, when a day is clicked, the picker closes and date is pasted on the input.
On this monthpicker, with the calendar grid hidden, when month is selected the picker doesn't close. User must still click Done.
Where is the event that closes the picker and pastes on the input, and how to hook it into the month and year selects?
To implement the functionality you described use the onChangeMonthYear event.
onChangeMonthYear: function(year, month, opts){
$(".monthpicker").datepicker( "setDate", new Date(year, month - 1, 1) );
$(".monthpicker").datepicker("hide");
},
I've updated your fiddle - http://jsfiddle.net/6zckwsn5/

How do I programmatically change the selected month in JQuery datepicker

I have a jQuery datepicker and I cannot figure out how to programmatically change the month back to the current month. After making a POST request to save the user's dates I need to return the calendar back to the current month. The calendar may be on a different month from the user playing around with different dates. I have tried setting the mindate again but that did not work.
This is not a popup calendar.
Setting the datepicker back to today
$('#myDatePicker').datepicker('setDate', new Date());
setting just the month back
var date = $('#myDatePicker').datepicker('getDate');
date.setMonth( (new Date()).getMonth() );
$('#myDatePicker').datepicker('setDate', date);
FIDDLE
You can also use .val() to set the date
$("#datepicker").val(date);

jQueryUI datepicker for date-range is failing to validate when date text box is cleared with keyboard

I am using jqueryUI datepicker for a date range as in this demo. This is failing to validate To as future date to From in the following case:
In FROM date choose 11/19/2011. Now go to Nov month of the 2011 in the TO datepicker, you can't pick the date before "11/19/2011". This is fine and expected behaviour
Now place your cursor in FROM date picker textbox using the mouse. Select the picked date i.e 11/19/2011 and delete i.e make the textbox empty. At this point of time 2 textboxes are empty.
Now go to 'TO' datepicker Check for NOV 2011. All the dates before 11/19/2011 are still disabled which is not required behaviour.
To solve this I made textboxes readonly but i want a better solution for this issue so that user can enter the date with keyboard as well as pick with mouse.
This is because the logic for setting minDate and maxDate is located in the select event listener (which does not get fired off when you completely remove a date from a datepicker field). You could bind to the change event instead:
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
}).bind("change", function() {
var option = this.id == "from" ? "minDate" : "maxDate",
selectedDate = this.value,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
});
Example: http://jsfiddle.net/TMnRX/

Categories

Resources