Restrict date picker to the same month based on the first date entered in the same table.

replied on October 19, 2021 • Show version history

Try this

// Global variables
let limitFirstDay = new Date();
let limitLastDay = new Date();

$(document).ready( function() {
$('#q3').click( function() { // Add row
setDateLimits($('.propCount').val());
});
});

DateEdit.txt (866 B)

| Download

0 0

replied on October 19, 2021

This is a little better

function setDateLimits() {
let limitFirstDay = new Date( $('#q4 tr td[data-title="Date"] input').first().val());
limitFirstDay.setDate(1);
let limitLastDay = new Date( limitFirstDay);
limitLastDay.setMonth(limitLastDay.getMonth() + 1);
limitLastDay.setDate(limitLastDay.getDate() - 1);
$('#q4 tr td[data-title="Date"] input').last().attr(
{min: limitFirstDay.toISOString().substring(0, 10),
max: limitLastDay.toISOString().substring(0, 10)});
};

$(document).ready( function() {
$('#q3').click( function() { setDateLimits(); });
});

0 0

View 3 previous replies

replied on November 3, 2021 • Show version history

Hi James,

Thanks for the help on this. I tried putting this code in and I couldn't get it to go. So I waited for a coworker of mine to be free to help. Anyway, he and another coworker don't think it's possible based on what they are seeing. I was figuring I'd reach again to see if I was altering it correctly to fit my form. I'm a bit of a javascript novice.

Screenshot 2021-11-03 145019.jpg (89.24 KB)

| Download

0 0

replied on November 4, 2021 • Show version history

It looks correct and the same logic works in my forms. Can you insert a console.log(var); for the computed dates before the limits are set?

0 0

replied on November 4, 2021

Oh, wait a minute... Did you type the invalid date or select it in the date picker? if you typed the date it won't be detected as invalid until you hit the submit. The date picker should limit your selection to the same month.

0 0

replied on November 4, 2021

I've been selecting in the date picker. I attached a screenshot of the console. I don't know if I put it in the right spot.

It looks like there is an error related to time. Maybe it's our version of forms? (Laserfiche Forms Professional Version 11.0.2108.10347)

Screenshot 2021-11-04 090713-console.jpg (374.11 KB)

| Download

Screenshot 2021-11-04 090816-error.jpg (260.29 KB)

| Download

0 0

replied on November 4, 2021

Can you try running this in preview mode instead of the side panel? What browser are you using? I've tested in Chrome, Edge, and IE. You've got a lot of errors that I've never seen before.

Also try this (in preview)

function setDateLimits() {
let limitFirstDay = new Date( $('#q4 tr td[data-title="Date"] input').first().val());
limitFirstDay.setDate(1);
let limitLastDay = new Date( limitFirstDay);
limitLastDay.setMonth(limitLastDay.getMonth() + 1);
limitLastDay.setDate(limitLastDay.getDate() - 1);
console.log(limitFirstDay);
console.log(limitLastDay);
// $('#q4 tr td[data-title="Date"] input').last().attr(
// {min: limitFirstDay.toISOString().substring(0, 10),
// max: limitLastDay.toISOString().substring(0, 10)});
$('#q4 tr td[data-title="Date"] input').last().attr(
"min", limitFirstDay.toISOString().substring(0, 10));
$('#q4 tr td[data-title="Date"] input').last().attr(
"max", limitLastDay.toISOString().substring(0, 10));
};

$(document).ready( function() {
$('#q3').click( function() { setDateLimits(); });
});

0 0

replied on November 12, 2021

Sorry about the delay. I have tried running it in Edge and Chrome. I just keep getting the invalid time value error back.

0 0

replied on November 4, 2021

Maybe this...

function setDateLimits() {
let limitFirstDay = new Date( $('#q4 tr td[data-title="Date"] input').first().val());
limitFirstDay.setDate(1);
let limitLastDay = new Date( limitFirstDay);
limitLastDay.setMonth(limitLastDay.getMonth() + 1);
limitLastDay.setDate(limitLastDay.getDate() - 1);
console.log(limitFirstDay);
console.log(limitLastDay);
let stringFirstDay = limitFirstDay.toISOString().substring(0, 10);
let stringLastDay = limitLastDay.toISOString().substring(0, 10);
console.log(stringFirstDay);
console.log(stringLastDay);
// $('#q4 tr td[data-title="Date"] input').last().attr(
// {min: limitFirstDay.toISOString().substring(0, 10),
// max: limitLastDay.toISOString().substring(0, 10)});
$('#q4 tr td[data-title="Date"] input').last().
attr("min", stringFirstDay).attr("max", stringLastDay);
};

$(document).ready( function() {
$('#q3').click( function() { setDateLimits(); });
});

0 0

replied on November 4, 2021 • Show version history

Checking the documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

"The toISOString() method returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always zero UTC offset, as denoted by the suffix "Z"."

It might be that your browser is using the 27 character format. Take a look at what "console.log(Date.now().toISOString());" displays.

0 0

replied on November 4, 2021

Sorry, try this to check the format returned by toISOString()

$(document).ready( function() {
let holdDateStr = new Date();
console.log(holdDateStr.toISOString());
$('#q3').click( function() { setDateLimits(); });
});

0 0

replied on November 4, 2021

You may have to process the date to construct the string version you need in your browser

let holdDate = new Date();
console.log(holdDate.toISOString());
console.log(holdDate.getFullYear());
console.log(holdDate.getMonth());
console.log(holdDate.getDate());
let holdDateStr = holdDate.getFullYear() + '-' +
('0' + (Number(holdDate.getMonth()) + 1)).slice(-2) + '-' +
('0' + holdDate.getDate()).slice(-2);
console.log(holdDateStr);

0 0

Question

Question

Restrict date picker to the same month based on the first date entered in the same table.

Replies

Sign in to reply to this post.