disable days of the week with react-datepicker - react-datepicker

I only want to disable the days of the week that I choose, or otherwise enable the days that I need
here is an illustrative image
I found this code in the documentation but it doesn't work for me
() => {
const [startDate, setStartDate] = useState(null);
const isWeekday = (date) => {
const day = getDay(date);
return day !== 0 && day !== 6;
};
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
filterDate={isWeekday}
placeholderText="Select a weekday"
/>
);
};

You can change the day of the week to disable in this example from the docs on the line return day !== 0 && day !== 6; by changing the last number.
For instance, changing day !== 6 to day !== 7 will exclude only Sundays, etc.
If you want to exclude multiple days of the week, add && day !== [day number] to the callback. For instance day !== 0 && day !== 2 && day !== 5; will exclude Sundays, Tuesdays & Fridays.

Related

Is my Twilio function correct for routing a call based on day of week and time of day?

I'm trying to route calls to different agents based on time of day using Twilio Studio referencing the following function and wondering if it's correct? I'm not a programmer, so this is adapted from Need help creating a Time Gate in Twilio Function
// Time of Day Routing
// Useful for IVR logic, for Example in Studio, to determine which path to route to
// Add moment-timezone 0.5.31 as a dependency under Functions Global Config, Dependencies
const moment = require('moment-timezone');
exports.handler = function(context, event, callback) {
let twiml = new Twilio.twiml.VoiceResponse();
function businessHours() {
// My timezone East Coast (other choices: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
const now = moment().tz('America/Denver');
// Weekday Check using moment().isoWeekday()
// Monday = 1, Tuesday = 2 ... Sunday = 7
if(now.isoWeekday() == 1 || 3 || 5 /* Check for Normal Work Week Monday - Friday */) {
//Work Hours Check, 9 am to 5pm (17:00 24 hour Time)
if((now.hour() >= 8 && now.hour() < 9:30) || (now.hour() >= 12 && now.hour() < 17) /* 24h basis */) {
return true
}
}
if(now.isoWeekday() == 2 /* Check for Normal Work Week Monday - Friday */) {
//Work Hours Check, 9 am to 5pm (17:00 24 hour Time)
if((now.hour() >= 8:30 && now.hour() < 11) /* 24h basis */) {
return true
}
}
if(now.isoWeekday() == 4 /* Check for Normal Work Week Monday - Friday */) {
//Work Hours Check, 9 am to 5pm (17:00 24 hour Time)
if((now.hour() >= 8 && now.hour() < 10:30) || (now.hour() >= 15 && now.hour() < 17) /* 24h basis */) {
return true
}
}
// Outside of business hours, return false
return false
};
const isOpen = businessHours();
if (isOpen) {
twiml.say("Business is Open");
} else {
twiml.say("Business is Closed");
}
callback(null, twiml);
};
Twilio developer evangelist here.
Stack Overflow is not the best place to ask "is this correct?". It's much better to come with an actual problem that you have and a description of the things you have tried to fix that problem. It's also hard to answer "is this correct?" if we don't know the outcome you actually want.
However, I can see one issue with the code above and that is dealing with working hours that fall outside of just on the hour tests.
now.hour() will return a whole number that is the current hour. You cannot compare this to 9:30 for example. Instead, we have to look at both the hours and the minutes,
In your first conditional hour check you have:
if((now.hour() >= 8 && now.hour() < 9:30) || (now.hour() >= 12 && now.hour() < 17) /* 24h basis */) {
return true
}
In words, you seem to be going for: If the time is between 8am and 9:30am or the time is between 12pm and 5pm then return true.
To cope with the time 9:30 we have to check that the time is between 8am and 10am and if it is some number of minutes past 9, that number of minutes is not more than 30. Just to cut down the code we are looking at, the issues is this predicate:
(now.hour() >= 8 && now.hour() < 9:30)
We could replace this with:
((now.hour() >= 8 && now.hour() < 9) || (now.hour() == 9 && now.minute() < 30))
This now tests that the hour is more than or equal to 8 and less than 9 OR that the hour is equal to 9 and the minutes are less than 30.
Since "greater than or equal to 8 and less than 9" is effectively the same as "equal to 8" we could shorten this to:
(now.hour() === 8 || (now.hour() == 9 && now.minute() < 30))
But you will want to use the full version when you want to fix further comparisons, like between 8:30 and 11 or between 8 and 10:30.
Hopefully this gives you a good idea of how to approach all your time comparisons.

Testing for out of hours call forwarding

I need to get a call forwarding number in place so that outside of uk office hours all incoming calls redirect to our out of hours service.
I've written this which returns a $status = 'closed';
<?php
// set the timezone
date_default_timezone_set ('Europe/London');
function checkDateValue($val, $args) {
if (($val) >= $args['min'] && ($val) <= $args['max'] ) :
return true;
else :
return false;
endif ;
}
// set min and max valuesfor hours, minutes and seconds - format HH:MM:SS
$hours = array(
'min' => '09:00:00',
'max' => '17:30:00'
);
// set min and max values bwtween 0 nd 6. 0 = sunday
$days = array(
'min' => 1,
'max' => 5
);
// store current time
$currentTime = time();
// test if the current time is in opening hours or is a weekday
$status = 'open';
if (checkDateValue(date('H:i:s', $currentTime), $hours) === false || checkDateValue(date('w', $currentTime), $days) === false) {
$status = 'closed';
}
I'm wondering if there is anything in the the php-sdk or in twiml that can handle conditional dialing based on detecting the time of day and day of the week and that also accounts for current callers timezone.
Thanks.
Twilio developer evangelist here.
There's nothing within Twilio's PHP SDK or TwiML that will do this time detection for you, you will need to write your own method (as you have done) to detect the current time and then use that to return different TwiML to perform the in hours or out of hours response.
So, you could add to your current script something like:
use Twilio\TwiML;
$response = new TwiML;
if ($status == 'closed') {
$response->say("Sorry, the office is closed right now");
} else {
$response->dial($officePhone);
}
echo $response;
I'm not sure why you would need to account for the current caller's time zone, your UK hours won't change if someone calls from France. Perhaps you could comment or update your question with a bit more detail. Otherwise, hope this helps.

How to stop timestamp updating when column is edited after first edit

I have a code that puts a timestamp in when column 1 is edited and then a second timestamp when another column has the word 'collected' input to it. From this I then work out time it took to be collected and use that data. However if someone edits column 1 again it updates the timestamp so I'm looking for a script to allow it to only do it on first edit. Here is my current script;
function onEdit(e) {
var sheet = SpreadsheetApp.getActiveSheet();
if( sheet.getName() == "CC sheet" ) {
//Update timestamp when changed to collected
var range = sheet.getActiveCell();
Logger.log(range.getColumn())
if( range.getColumn() == 7.0 ) { //if we are in the status column...
var nextCell = range.offset(0, 2);
if(range.getValue() == 'Collected')
if( nextCell.getValue() === '' ) //is empty?
nextCell.setValue(new Date());
}
//end
}
if(e.source.getActiveSheet().getName() !== 'CC sheet' || e.range.columnStart !== 1) return;
e.range.offset(0, 5).setValue(e.value ? new Date() : null);
}
It is the bottom bit I need to change to only update on first edit. Any help with this would be much appreciated.
replace last row or code with this one:
if (e.range.offset(0, 5).getValue() === '') {
e.range.offset(0, 5).setValue(e.value ? new Date() : null);
}
it's the same 'is empty?' check, as you have in the first part of script.

Multiple criteria timestamp

I am using...
function onEdit() {
var s = SpreadsheetApp.getActiveSheet();
var r = s.getActiveCell();
var time = new Date(+new Date + (1000 * 60 * 60 * 24 * 7));
time = Utilities.formatDate(time, "GMT-08:00", "MM/dd/yyyy");
if( r.getColumn() == 2 ) { //checks the column
var nextCell = r.offset(0, 6);
if( nextCell.getValue() === '' ) //is empty?
nextCell.setValue(time);
}
}
...to add a timestamp+7 days to column H.
In addition to this timestamp feature... (could be another script)
When column D value = "Questions/Waiting for Info" and then changes to anything else.
and
When column E value = "Preliminary, Less than 25kW" or "Preliminary, Less than 25kW" and then changes to anything except for "Preliminary, Less than 25kW" or "Preliminary, Less than 25kW".
we want to start the timestamp+7 days over again.
It appears that this might not work with onEdit as there are some values that must be read prior to the edit. Not sure how to do this. Thanks
Correct, this is impossible using onEdit without copying the original data somewhere else first. A complicated solution out of my expertise at the moment.
Maybe try something like this
function onEdit(e) {
var d = new Date(new Date() + (1000 * 60 * 60 * 24 * 7));
var time = Utilities.formatDate(d, "GMT-08:00", "MM/dd/yyyy"),
ind = [2, 4].indexOf(e.range.columnStart),
off;
if (ind == 0) {
off = 6;
} else if (ind == 1 && e.value !== "Questions/Waiting for Info") {
off = 4;
}
e.range.offset(0, off).setValue(time)
}

Show months outside date range in selector?

I'm using jQuery UI's DatePicker to select a date of birth for consumers on my website. It is currently showing with the month and year via drop downs When, for example, I restrict the years to -18y, via maxDate, the month drop down does not show all of the months when the year 1993 is selected. It only shows the months up until the maximum months.
In usability testing, we've found that our demographic tends to click the month of their birth, then the year, then the day.
Is there a way to show all of the months, even if the dates within that month are not selectable?
Here is the code used to show the DatePicker:
$('.DobWidget').datepicker({
showOn: 'both',
buttonImage: '/media/img/admin/icon_calendar.gif',
buttonImageOnly: true,
dateFormat: js_date_format, // mm/dd/yyyy
constrainInput: false, // Handled server-side for type-in.
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-110y',
showButtonPanel: true,
onChangeMonthYear: function(year, month, inst) {
if (inst.currentDay != 0) {
$(this).datepicker("setDate", new Date(year, month - 1, inst.currentDay));
}
}
});
I am currently using jQueryUI v.1.8.16, and jQuery v.1.6.3, both provided by the Google AJAX API's.
Fix for jquery ui 1.8.17
I also had this problem I got in to work by changing some things in the jquery code. Now I see all months and I can select them but dates will still be unselectable as you want.
In _generateHTML function in the if statement you add maxDraw.setMonth('11'):
if (maxDate) {
maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
maxDraw.setMonth('11');
while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
...
}
}
In _generateMonthYearHeader function in the for loop of the else statement you change:
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= maxDate.getMonth()))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
becomes
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= 11))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
In _restrictMinMax you add maxDate.setMonth('11'):
...
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
var newDate = (minDate && date < minDate ? minDate : date);
...
In _isInRange you add maxDate.setMonth('11'):
var minDate = this._getMinMaxDate(inst, 'min');
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
...

Resources