Question

Automatically choose month based on date

Forms

Updated February 17, 2021

asked on July 21, 2015

I've created a leave request form that contains a dropdown for the user to select the month, as well as date fields for leave start and end dates. Is there a way to have the month be auto-selected by the start date a user chooses? Either that, or extract the month from the start date to be used as a variable when saving to the repository? I want to ensure that a user can't choose a different month than the dates they're selecting in the date fields.

0 0

Answer

SELECTED ANSWER

replied on July 21, 2015

No problem. Just add another single line field in your form to hold the start year. I'm using the CSS class, startyear. The Javascript would then be

$(document).ready(function () {
  
  $('.startmonth input').attr('readonly','true');
  $('.startyear input').attr('readonly','true');

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];
  
  $('.start input').on('change', function() {
    var dateSplit = $('.start input').val().split("/");
    $('.startmonth input').val(monthNames[dateSplit[0]-1]);
    $('.startyear input').val(dateSplit[2]);
  });

});

The idea is to get the date that the user inputs and place the individual month, day, and year values into an array (dateSplit in our case). Then whenever the start date field is changed, it'll take the date value, isolate the month, calculate the name of that month, and then set that value into the start month field. It then takes the year value and sets that into the start year field.

1 0

Replies

replied on July 21, 2015

a different month or an earlier month/year than selected?

I believe I have posted JavaScript code in an answer before about how to set the second date to not be any earlier thatn the first date you select. You can use this to make it start at the minimum date when selecting the return/end date.

0 0

replied on July 21, 2015

Thanks for your reply. I want the month to be the same as what is selected by the date, neither earlier nor later. For example: A user chooses 31 July 15 for their leave date. I want to be able to grab the month of July from that selected date to be used as a variable when saving the document to the repository. For that matter, I want to be able to extract the year as well. I currently have fields for year and month, which are simply text fields and a dropdown with default values selected. Each month and year I will have to manually change those defaults. It's not a big hassle, but it would be more efficient if they could be generated automatically based on the date a user chooses.

0 0

replied on July 21, 2015 • Show version history

Just to confirm, users are filling out the start and end dates of their leave, and you want to capture the name of the month that corresponds to the start date? If so, you can use the following Javascript

$(document).ready(function () {
  
  $('.startmonth input').attr('readonly','true');

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];
  
  $('.start input').on('change', function() {
    var dateSplit = $('.start input').val().split("/");
    $('.startmonth input').val(monthNames[dateSplit[0]-1]);
  });

});

The form uses a date field for the start date and has a CSS class called start. There is a single line field that will be used to store the month name and that uses the CSS class, startmonth. I also make this field read-only so users can't change it.

0 0

replied on February 17, 2021

I need the same exact function but when I copy the code, the values are in red.

Code.PNG (15 KB)

| Download

0 0

replied on July 21, 2015

Alexander, thank you very much, that works perfectly! Sorry to trouble you, but how do I tweak that to do the same for the year? I've only started learning Javascript, so I'm still woefully ignorant at this point.

0 0

View 2 previous replies

SELECTED ANSWER

replied on July 21, 2015

No problem. Just add another single line field in your form to hold the start year. I'm using the CSS class, startyear. The Javascript would then be

$(document).ready(function () {
  
  $('.startmonth input').attr('readonly','true');
  $('.startyear input').attr('readonly','true');

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];
  
  $('.start input').on('change', function() {
    var dateSplit = $('.start input').val().split("/");
    $('.startmonth input').val(monthNames[dateSplit[0]-1]);
    $('.startyear input').val(dateSplit[2]);
  });

});

1 0

replied on July 21, 2015

Again, exactly what I needed. Thank you so very much!!!

0 0

replied on August 6, 2015

Hi Alexander,

I wonder if I might be able to trouble you with a related follow up question. The month and year work perfectly in changing to what they should, however, as soon as the form is submitted, the month is blank. The year shows up though. I can't figure out what's going on.

Thanks,

Michael

0 0

replied on August 6, 2015

Check in the form editor and make sure that within the editor UI, you didn't set the Month field to be read-only. The same would apply to the Year field although I wouldn't expect it to be set to read-only there since that works fine. Just use the JavaScript to set the fields to be read-only.

See if that works now.

0 0

replied on August 6, 2015

Looks like that was it. Again, thank you very much!

0 0

replied on August 18, 2015

I'm curious to know if there's a way to limit the month of the end date to the same month as the start date, so that users can't choose a date range that spans two separate months.

0 0

View 3 previous replies

replied on August 18, 2015

You can use moment.js for this. Place the file into the js folder under the Forms program files location. Using the same CSS class names for your start and end date fields, use this JavaScript

$(document).ready(function () {
  
  $.getScript('http://server/Forms/js/moment.js');
  
  $('.start input').on('change', function() {
    var minDate = moment($('.start input').val()).format("YYYY-M-DD");
    var maxDate = moment($('.start input').val()).endOf('month').format("YYYY-M-DD");
    $('.end input').attr('min',minDate);
    $('.end input').attr('max',maxDate);
  });
  
});

After the user sets the start date, it will limit the end date to only the start date through the end of the month.

1 0

replied on August 18, 2015

As always, thank you for your prompt reply.

So, to make sure I'm doing this correctly. I add this code after the code you'd previously given me, so that it all looks like what's shown below. Then I set the CSS class names for both start and end dates. I put the moment.js in C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js Do I change the "server" portion of http://server/Forms/js/moment.js to what our server is?

Thanks,
Michael

$(document).ready(function () {

$('.startmonth input').attr('readonly','true');
$('.startyear input').attr('readonly','true');

var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];

$('.start input').on('change', function() {
var dateSplit = $('.start input').val().split("/");
$('.startmonth input').val(monthNames[dateSplit[0]-1]);
$('.startyear input').val(dateSplit[2]);
});

});

$(document).ready(function () {

$.getScript('http://server/Forms/js/moment.js');

$('.start input').on('change', function() {
var minDate = moment($('.start input').val()).format("YYYY-M-DD");
var maxDate = moment($('.start input').val()).endOf('month').format("YYYY-M-DD");
$('.end input').attr('min',minDate);
$('.end input').attr('max',maxDate);
});

});

0 0

replied on August 18, 2015

You would combine it like

$(document).ready(function () {

  $.getScript('http://server/Forms/js/moment.js');
  
  $('.startmonth input').attr('readonly','true');
  $('.startyear input').attr('readonly','true');

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];
  
  $('.start input').on('change', function() {
    var dateSplit = $('.start input').val().split("/");
    $('.startmonth input').val(monthNames[dateSplit[0]-1]);
    $('.startyear input').val(dateSplit[2]);
    var minDate = moment($('.start input').val()).format("YYYY-M-DD");
    var maxDate = moment($('.start input').val()).endOf('month').format("YYYY-M-DD");
    $('.end input').attr('min',minDate);
    $('.end input').attr('max',maxDate);
  });

});

and you'd change the "server" to your actual Forms server such that the URL to the moment.js file is valid.

1 0

replied on August 18, 2015

Thank you. Everything looks correct on my end, however, it's not limiting me on the end month. I can still choose whichever month I want.

0 0

replied on August 18, 2015

Did you make sure to give the end date field a CSS class named end?

1 0

replied on August 19, 2015

That was the problem. I took your instructions on using the same CSS class names for the start and end date fields too literally. Thank you very much for your help. I really appreciate it.

0 0

You are not allowed to follow up in this post.

Question

Question

Automatically choose month based on date

Answer

Replies

Sign in to reply to this post.