I have flatpickr date picker on my webpages. Users can select date and time from range from minDate to maxDate. On create form component I also want to set last value, which user select - selectedDate.
If the selectedDate is from last day, flatpicker ignores it.
My code:
const options: Partial<BaseOptions> = {
minDate: minDate, // "2020-12-05 00:00"
maxDate: maxDate, // "2020-12-24 23:59"
dateFormat: 'Y-m-d H:i',
defaultDate: selectedDate, // "2020-12-24 17:00"
enableTime: true,
};
const picker = <flatpickr.Instance> flatpickr(inputElement, options);
picker.setDate(selectedDate);
After some debugging I found a problem. Flatpicker sets internal maxDate to last midnight 2020-12-24 23:59 => 2020-12-24 00:00 and inside setDate() ignores the selectedDate 2020-12-24 17:00, which is not between minDate maxDate.
I fix that by adding this line of code just before picker.setDate(selectedDate);
// ... init the picker ...
picker.set('maxDate', maxDate);
// ... setDate() ...
This sets internal maxDate to desired datetime and make your selectedDate work well.
Related
I am trying to assign a date range - start/end dates for a process. The catch is that the start date should be the 00:00:00 of the start date and end date should be 23:59:59 of the end date in the timezone that my server is in.
Input is 4/4/2017
Following is my code snippet,
var pEnddate = formatDate (campaign.CMPGN_DTL_TX.CMPGN_END_DT, "yyyy-mm-dd 23:59:59");
pEnddate.then (function ( endDate ) {
var endDate1 = moment.tz (endDate, "America/Phoenix").format ();
campaign.CMPGN_DTL_TX.CMPGN_END_DT = endDate1;
}
It is going good for the first time and saving in UTC as "CMPGN_END_DT" : ISODate("2017-04-05T06:59:59.000+0000")
When I try editing it, the next time the date from my TS is coming as "CMPGN_END_DT" : ISODate("2017-04-05T06:59:59.000+0000"). But, the date is changing to the next date, which is CMPGN_END_DT" : ISODate("2017-04-05T23:59:59.000+0000") because I am hard-coding the time. I'm doing this to ensure I set it to the end of day. Because of this, every time I execute this code (which is when I'm updating the related process), the date is getting incremented by 1.
The only workaround I could figure out was to set it to the EOD without having to hard-code it. Is there some way I can achieve this?
I Use Trinidad 2.1 and using tr:validateDateTimeRange to set maximum date in trinidad input date tag,
<tr:inputDate id="frmCal" value="#{reportsBackingBean.reportsModel.searchFromDt}">
<tr:validateDateTimeRange maximum="#{reportsBackingBean.maxDate}" />
Here reportsBackingBean.maxDate refers current date and in date picker when i select current date and submit the form it shows validation error "The date must be on or before 17/09/2015".
Is this the actual behavior? I need current date should be accepted. Please help
MyFaces has changed its implementation for validateDateTimeRange. You have to give the maximum values for 'hours, minutes, seconds, milliseconds'.
Try this:
<code>Calendar cal = Calendar.getInstance();
cal.setTime(maxDate);
cal.set(Calendar.HOUR_OF_DAY, 23);
cal.set(Calendar.MINUTE, 59);
cal.set(Calendar.SECOND, 59);
cal.set(Calendar.MILLISECOND, 59);
maxDate = cal.getTime();
</code>
Note: maxDate is the variable which you have it in reportsBackingBean.
https://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_validateDateTimeRange.html
i'm not sure if this is possible but i can't find any clue of doing this with multidatespicker..
i'm creating a web booking system which need to allow customer to select any booking date which they like.
But now my client was requesting to create package like weekly package(4 times per month), biweekly(1 times per 2 weeks) and etc..For weekly example.. when customer choose tuesday of that week.. the rest of 6 days all will be disable.. and for biweekly.. for that week and next week will be disable..
Thousand appreciate for someone who could help :)
I have the same issue: in my booking project the user must can select days range but also week range (only from Saturday to Saturday).
I managed the selection of the week on onSelect() event of multiDatesPicker() init function: by click on a day of the week MultiDatesPicker auto-select the relative week from Saturday to Saturday.
Unfortunately, for me the open issue is the hover event, because I want MultiDatesPicker also hover the week by pass hover the days of a week, not only select it, so the user could have perception to really choose weeks, not days.
It's singular that MultiDatesPicker has not a onHover() function to manage the "pre-selection"/hover event.
var autoselectRange = [0, days_range];
$('.multidatespicker-wrapper').multiDatesPicker({
numberOfMonths: [1, 2],
minDate: 1,
firstDay: 1,
mode: 'daysRange',
onSelect: function(dateText, inst) {
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
from_date = new Date(moment(dateText, "MM/DD/YYYY").format("YYYY-MM-DD"));
to_date = new Date (moment(dateText, "MM/DD/YYYY").add('days', days_range - 1).format("YYYY-MM-DD"));
if (weekRange) {
// Setting of Start and End of the week
if (from_date.getDay() == 6) numDaysToWeekStart = 0; // because Saturday in this case it is Start of the week
else numDaysToWeekStart = from_date.getDay() + 1;
from_date = new Date(from_date.setDate(from_date.getDate() - numDaysToWeekStart));
to_date = new Date(to_date.setDate(to_date.getDate() - numDaysToWeekStart));
// Setting of the days of the week
date = new Date(from_date);
weeks = [];
while (date <= to_date) {
weeks.push(new Date(date));
date.setDate(date.getDate() + 1);
}
// Selection of the days of the week/weeks in MDP Calendar
$(this).multiDatesPicker('resetDates', 'picked');
$(this).multiDatesPicker('addDates', weeks);
}
// Any more controls
},
autoselectRange: autoselectRange,
pickableRange: days_range,
// any more settings });
I hope It could be a help; if you have some idea to manage hover event and you can share it. Thanks
I have a requirement of setting date ranges
t1 I select a date and the t2 date must be within 90 days of the selected date in t1.
pls help me achieve this thanks
heres my part of javascript that I have tried
<%-- <script type="text/javascript">
$(document).ready(function(){
$("#txtOnDate").datepicker({
minDate: 0,
numberOfMonths: 1,
onSelect: function(selected) {
$("#txtAppDate").datepicker("option","minDate", selected)
}
});
$("#txtAppDate").datepicker({
minDate: 0,
maxDate:"+90D",
numberOfMonths: 1,
});
});
</script>--%>
the issue that I am facing in the above script is when I select the end date it doesn't change according to the 1st textbox selected date. it remains the same date irrespective of the date selected in the ttxtbox1
please help
You could use the .change() to edit the value
eg:
$("#txtOnDate").change({
$("#txtAppDate").val = date + 90;
});
Is it possible to create a date only field in XPages? I have tried the following in the querySaveDocument event but the field still ends up with a time portion of 00:00:00
var notesDoc:NotesDocument = document1.getDocument();
var dt:NotesDateTime = session.createDateTime(#Today());
dt.setAnyTime();
notesDoc.replaceItemValue("MyDateField", dt);
It is not completely clear what you are trying achieve.
You can put an EditBox component on your XPage, then go to the "Data" tab. From there you can change the formatting from String to Date. More options should appear on how to format the date in the field. It will handle passing the date to the back end document.
If it is you want to write directly to the back end document, then here is a page listing samples on working with NotesDateTime.
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/NotesDateTime_sample_JavaScript_code_for_XPages
Here is code by Sven:
ndt = session.createDateTime(ndt.getDateOnly());
item.setDateTimeValue(ndt);
error in date items, daylight Saving
Update:
I had to do the same thing and found out that it's working this way in Java agent in 8.5.2FP3:
DateTime dt = session.createDateTime(new java.util.Date());
dt.setAnyTime();
doc.appendItemValue("DT", dt);