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;
});
Related
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.
I've a problem when I'm reading a Date value from columns in a excel file using exceljs package, I can't get the truth value in the correct format like a Date data type, instead I get a number.
My project is build with Nest, and I use exceljs to write/read xlsx files, the code is:
worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
row.eachCell((cell, colNumber) => {
...
const header = headers[colNumber - 1];
switch (header) {
...
case 'dateColumn':
// Date format is dd/mm/yyyy
// Original value in excel is '16/06/2020'
const cellValue: Date = cell.value as Date; // When i get value from cell is 43998
console.log(cellValue); // print 43998
break;
...
}
}
The cell format is 'dd/mm/yyyy'
You will need to convert Excel Date Serial Number to JS Date.
Here is a very basic example:
const date0 = new Date(0);
const utcOffset = date0.getTimezoneOffset();
const cellValue = new Date(0, 0, cell.value - 1, 0, -utcOffset, 0);
To convert Excel Serial Date to normal you can use
new Date(Date.UTC(0, 0, cell.value - 1, 0, 0, 0))
All,
I've been looking all day and have tried numerous solutions, but just can't get it to work. Our team projects a list that is constantly updated and we want to highlight only newly created items for 5 minutes. After 5 minutes, the row would return to normal. (FYI- the list is projected on a display and updated using AJAX asynchronous update every 15 seconds)
Basically, I want to set conditional formatting on list items created in the last 5 minutes. If the item was created in the last 5 minutes, the row will be highlighted. After the 5 minutes are up, the row would return to normal.
I tried SharePoint Designer conditional formatting by creating a calculated column in Date/Time format called "Created + 5" and tried to set an expression where the formatting is applied (row is highlighted) when "Created + 5" is greater than or equal to current date. So after 5 minutes, the row will no longer be highlighted (because the current date/time will exceed the "Created + 5" value)
Here is the expression from the SPD Advanced Condition Builder:
ddwrt:DateTimeTick(ddwrt:GenDisplayName(string($thisNode/#Created_x0020__x002b__x0020_5_x))) >=
ddwrt:DateTimeTick(ddwrt:GenDisplayName(string($Today)))
I think the problem is that the [Current Date] option ($Today in the expression builder) only accounts for date and not time. It looks like it just ends up highlighting everything that was created today, which is not very useful.
Any thoughts or help!? I have never messed with the advanced conditions because usually the basic stuff works fine for me! If anyone has any other ideas too like JavaScript or anything else that would work, I am open to that too as long as it will continuously update!
Thanks all!!!!
[Today] actually doesn't work properly in 2010, there are some workarounds though, e.g. https://abstractspaces.wordpress.com/2008/05/19/use-today-and-me-in-calculated-column/.
You can also use the approach with calculated column: https://blog.splibrarian.com/2012/06/06/using-calculated-columns-to-add-color-coding-to-your-sharepoint-lists/
Since you want this to update automatically without requiring someone to manually refresh the page, JavaScript is your best bet. You can have a function run repeatedly on a specified interval, checking the current date against the values in a date column.
Something like the following code would work, though you may need to tweak the CSS selectors specified in the calls to document.querySelector and querySelectorAll to match your particular HTML.
<script>
formatCell();
function formatCell(){
var frequencyToCheck = 2 /* num seconds between updates */
var minutes = 5; /* num minutes back to highlight */
var targetColumn = "Display name of the column you want to check";
var formatting = "background-color:darkred;color:red;font-weight:bold;";
var comparisonDate = new Date();
comparisonDate.setHours(comparisonDate.getHours() - minutes);
var tables = document.querySelectorAll("table.ms-listviewtable"); /* should get all list view web parts on the page */
var t_i = 0;
while(t_i < tables.length){
var headings = tables[t_i].rows[0].cells;
var columnIndex = null;
var h_i = 0;
while(h_i < headings.length){
var heading = headings[h_i].querySelector("div:first-child");
if(heading != null){
var displayName = heading.DisplayName ? heading.DisplayName : (heading.innerText ? heading.innerText : heading.textContent);
displayName = displayName.replace(/^\s+|\s+$/g,''); /* removes leading and trailing whitespace */
if(displayName === targetColumn){
columnIndex = h_i;
break;
}
}
h_i += 1;
}
if(columnIndex != null){ /* we found a matching heading */
var rows = tables[t_i].rows;
for(var i = (rows.length > 0 ? 1 : 0); i < rows.length; i++){
var cells = rows[i].children;
if(cells.length <= columnIndex){continue;}
var valueToEval = cells[columnIndex].innerText ? cells[columnIndex].innerText : cells[columnIndex].textContent;
if(typeof valueToEval == "undefined"){valueToEval = "";}
valueToEval = new Date(valueToEval);
if(valueToEval > comparisonDate){
cells[columnIndex].setAttribute("style",formatting);
}else{
cells[columnIndex].setAttribute("style","");
}
}
}
t_i +=1;
}
setTimeout(formatCell,frequencyToCheck * 1000);
}
</script>
One potential pitfall is that while this approach will "age" records appropriately based on their displayed values (causing them to stop being highlighted as they grow stale), it won't automatically pick up new changes to the list; you'd need to refresh the page (or at least refresh the view in the web part) whenever you want to see updated information.
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