Hello, Community...!
I would really to know the way to open date piker option Up side Always rather than down.
Please see below image,
in below image, child form control date piker at very bottom of page, and when user try to fill date in show piker tabel (Option) at down side, is there any way i can find open it in up side compalsary?
Because for this issue i may need to increase hight of Dialog box that i don't want to use...!
Please help me out...!
Thanks in advance.
Hello @harshp924,
You can change the position of the calendar using this code:
fd.rendered(function() {
fd.field('Date').widgetOptions = {
popup: {
position: "center center"
}
}
});
Please find more information about the popup:position property here.
Hello @mnikitina,
I have added above code but it is doing nothing. No errors on the console. below is my code
fd.spRendered(function () {
console.log('study form load');
fd.field('study_x002d_NN_x002d_Begin').widgetOptions = {
popup: {
position: "center center"
}
}
fd.field('study_x002d_NN_x002d_End').widgetOptions = {
popup: {
position: "center center"
}
}
});
below is my outcome
Hello @harshp924,
You need to add the code I've shared before spRendered event, like this:
fd.rendered(function() {
fd.field('Date').widgetOptions = {
popup: {
position: "center center"
}
}
});
fd.spRendered(function () {
//the rest of your code
});Hi,
j
Trying to use a date calendar, and the date will not show passed 30 June 2023, the code we have entered is:
fd.spRendered(function() {
fd.field('StartTimeText').value = fd.field('StartTime').value;
fd.field('EndTimeText').value = fd.field('EndTime').value
fd.field('StartTimeText').$on('change', updateStartTime);
fd.field('EndTimeText').$on('change', updateEndTime);
//executes updateClubInfo on field change
fd.field('Club').$on('change', updateClubInfo);
fd.field('Duration_x0028_mins_x0029_').widgetOptions = {
min: 0,
max: 1440
}
fd.field('StartDate').widgetOptions = {
min: new Date(2023, 6, 1),
max: new Date(2024, 5, 30),
setDate: new Date(2023, 6, 1),
disableDates: [new Date(2023, 11, 25), new Date(2023, 11, 26), new Date(2024, 0, 1)]
}
fd.field('EndDate').widgetOptions = {
min: new Date(2023, 6, 1),
max: new Date(2024, 5, 30),
setDate: new Date(2023, 6, 1),
disableDates: [new Date(2023, 11, 25), new Date(2023, 11, 26), new Date(2024, 0, 1)]
}
fd.field('EndDate').validators.push({
name: 'DateValidator',
error: "The end date must be greater than the start date.",
validate: function(value) {
if (fd.field('EndDate').value < fd.field('StartDate').value){
return false;
}
return true;
}
});
This is what I am getting:
Thanks in advance 
Hello @kakarich,
Welcome to Plumsail Community!
As I can see, this is a Date column inside the Data Table control. The code you've shared doesn't include the code related to Data Table control.
Please share the complete code you are using or export the form.
Thank you
I hope this is all the code you are looking for. The form can be found under here: SSV Booking Form - Active Stirling
function updateClubInfo() {
fd.field('Title').value = fd.field('Club').value.LookupValue;
}
function updateStartTime() {
fd.field('StartTime').value = fd.field('StartTimeText').value;
}
function updateEndTime() {
fd.field('EndTime').value = fd.field('EndTimeText').value;
}
fd.rendered(function() {
fd.field('Date').widgetOptions = {
popup: {
position: "center center"
}
}
fd.spRendered(function() {
fd.field('StartTimeText').value = fd.field('StartTime').value;
fd.field('EndTimeText').value = fd.field('EndTime').value
fd.field('StartTimeText').$on('change', updateStartTime);
fd.field('EndTimeText').$on('change', updateEndTime);
//executes updateClubInfo on field change
fd.field('Club').$on('change', updateClubInfo);
fd.field('Duration_x0028_mins_x0029_').widgetOptions = {
min: 0,
max: 1440
}
fd.field('StartDate').widgetOptions = {
min: new Date(2023, 6, 1),
max: new Date(2024, 5, 30),
setDate: new Date(2023, 6, 1),
disableDates: [new Date(2023, 11, 25), new Date(2023, 11, 26), new Date(2024, 0, 1)]
}
fd.field('EndDate').widgetOptions = {
min: new Date(2023, 6, 1),
max: new Date(2024, 5, 30),
setDate: new Date(2023, 6, 1),
disableDates: [new Date(2023, 11, 25), new Date(2023, 11, 26), new Date(2024, 0, 1)]
}
fd.field('EndDate').validators.push({
name: 'DateValidator',
error: "The end date must be greater than the start date.",
validate: function(value) {
if (fd.field('EndDate').value < fd.field('StartDate').value){
return false;
}
return true;
}
});
});
fd.spRendered(function() {
function toggleFields() {
if (fd.field('Status').value == 'Calculating price...') {
$('.calculatingprice').show();
fd.field('Payment_x0020_Method').disabled = true;
fd.field('FacilitySpace').disabled = true;
fd.field('PriceProduct').disabled = true;
fd.field('AreatoAllocate').disabled = true;
fd.field('StartDate').disabled = true;
fd.field('EndDate').disabled = true;
fd.field('ExcludedDates').disabled = true;
fd.field('StartTimeText').disabled = true;
fd.field('EndTimeText').disabled = true;
fd.field('Duration_x0028_mins_x0029_').disabled = true;
fd.field('_x0032_022Override').disabled = true;
fd.field('_x0032_023Override').disabled = true;
fd.field('_x0032_022PriceOverride').disabled = true;
fd.field('_x0032_023PriceOverride').disabled = true;
} else if (fd.field('Status').value == 'Allocation Sent') {
$('.calculatingprice').hide();
} else if (fd.field('Status').value == 'Allocation Not Sent') {
$('.calculatingprice').hide();
} else if (fd.field('Status').value == 'Send Allocation') {
$('.calculatingprice').hide();
} else {
$('.calculatingprice').hide();
}
}
toggleFields();
function amendedStatus () {
fd.field('Status').value = 'Calculating price...';
fd.field('CostPerHour').value = 0;
fd.field('CostPerHour_x0028_2023_x0029_').value = 0;
}
fd.field('PriceProduct').$on('change',amendedStatus);
//Show/Hide 2023 override
function toggle2023Override() {
if (fd.field('_x0032_022Override').value == true) {
$('.2023Override').show();
} else {
$('.2023Override').hide();
}
}
fd.field('_x0032_022Override').$on('change', toggle2023Override);
toggle2023Override();
//Show/Hide 2024 override
function toggle2024Override() {
if (fd.field('_x0032_023Override').value == true) {
$('.2024Override').show();
} else {
$('.2024Override').hide();
}
}
fd.field('_x0032_023Override').$on('change', toggle2024Override);
toggle2024Override();
//toolbar settings
fd.messages.SPFormToolbar_Saving = ' Save changes'
fd.messages.SPFormToolbar_Save = ' Save changes'
fd.messages.SPFormToolbar_Close = ' Exit without saving'
fd.toolbar.buttons[0].icon = 'Save';
fd.toolbar.buttons[1].icon = 'ChromeClose';
//activate request button
function toggleActive() {
if (fd.field('Status').value == 'Allocation Not Sent') {
// Activate request
fd.toolbar.buttons.push({
icon: 'SkypeCircleCheck',
class: 'btn-outline-success',
text: ' Send with allocation flow',
click: function() { if (confirm("This will add this allocation to the Block Booking confirmation flow. Click OK to confirm."))
{fd.field('Status').value = 'Send Allocation';
fd.save();
}
}
});
} else {
}
}
toggleActive();
//close request button
function toggleClosed() {
if (fd.field('Status').value == 'Send Allocation') {
// Close request
fd.toolbar.buttons.push({
icon: 'DeleteRows',
class: 'btn-outline-danger',
text: ' Remove from allocation flow',
click: function() { if (confirm("Click OK to confirm you would like to close this ticket."))
{fd.field('Status').value = 'Allocation Not Sent';
fd.save();
}
}
});
} else {
}
}
toggleClosed();
//escalate request button
function toggleEscalate() {
if (fd.field('Status').value == 'Allocation Sent') {
// Escalate request
fd.toolbar.buttons.push({
icon: 'Undo',
class: 'btn-outline-warning',
text: ' Reset allocation status',
click: function() { if (confirm("This action will recalculate the price for this allocation, and change the status to Allocation Not Sent. Click OK to confirm.."))
{fd.field('Status').value = 'Calculating price...';
fd.field('CostPerHour').value = 0;
fd.field('CostPerHour_x0028_2023_x0029_').value = 0;
fd.save();
}
}
});
} else {
}
}
toggleEscalate();
});
Thanks in advance
Karen
Hello @kakarich,
Could you please export the form for me.
Go to form setting and click "Export" button:
