"Input" object works differently in FireFox Topic is solved

[gerese]

Hello, the "Input" object set as input data type works differently or does not work in FireFox compared to Chrome, like this:
Datetime-local - the hours and minutes do not appear in the calendar popup
Month - no popup
Time - no popup
Week - no popup

Thank you.

[kev1n]

FF limitation? The popupbis rendered by the browser, not nuBuilder.

[gerese]

On my side, I have no limitation with Firefox, it is updated, I tried from different computers, the same behavior.
In your case, does the popup appear for an Input object set as Month in FireFox?
Thank you.

[kev1n]

Datetime-local - the hours and minutes do not appear in the calendar popup

What I mean is that some input types, such as datetime-local, month, time, and week, are relatively new and may not be fully supported by all web browsers yet. As a result, some browsers may have differences in the way they handle these input types, including differences in the appearance of the control and the behavior of the pop-up. If you are experiencing issues with these input types in a particular browser, it may be helpful to check the browser's documentation or bug tracker to see if there are any known issues or workarounds as this doesn't appear to be a nuBuilder specific problem.

As for ...

Month - no popup
Time - no popup
Week - no popup

... I'm not sure if this is also related to "datetime-local" or if you set a specfic format using nuDate Input Type.

[kev1n]

Hi gerese,

Please let me know what format you used for Month, Time, Week.

As for ...

Month - no popup
Time - no popup
Week - no popup

... I'm not sure if this is also related to "datetime-local" or if you set a specfic format using nuDate Input Type.

[gerese]

Thank you Kevin, in my implementation I needed to generate a report selecting the year and month. I wanted to use Input - month, it worked with chrome, but on the network most of the computers installed Firefox (the network is not connected to the Internet), users not being able to use the form. I just wanted to report this situation to the community and find out if other users have this problem or if it is a local problem from a wrong implementation of a script of mine.
To solve it, I used nuDate, which works correctly in both Chrome and Firefox, but the user has to make a few extra clicks to select what he needs.

[kev1n]

Thank you for providing clarification.

Unfortunately, Firefox does not support the "Month" and "Week" input types, as outlined in the following resources:

https://developer.mozilla.org/en-US/doc ... nput/month
https://developer.mozilla.org/en-US/doc ... input/week

bc.png

"Time" is supported but behaves differently in FF (E.g. no popup)


If you need to use the "Month" or "Week" input types in your web application and you want to ensure cross-browser compatibility, there are a few alternative ways to implement them in Firefox:

- Use a third-party JavaScript library like jQuery UI datepicker() (Example)

- Implement a custom UI plugin that mimics the behavior of the "Month" or "Week" input types. This approach requires more development effort but can provide a more tailored user experience.

Here's an example jQuery plugin that allows users to select a year and month from a popup window (generated with ChatGPT)

Code: Select all

(function($) {
  $.fn.monthYearPicker = function(options) {
    
    var settings = $.extend({
      startYear: new Date().getFullYear() - 100, // default starting year is 100 years ago
      endYear: new Date().getFullYear(), // default ending year is the current year
      selectedYear: null, // default selected year is null
      selectedMonth: null, // default selected month is null
      onMonthYearSelected: function(year, month) {} // default callback function
    }, options);

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

    var currentYear = settings.selectedYear ? settings.selectedYear : settings.endYear;
    var currentMonth = settings.selectedMonth ? settings.selectedMonth : new Date().getMonth();

    var $container = $("<div class='month-year-picker-container'></div>");
    var $yearDropdown = $("<select class='year-dropdown'></select>");
    var $monthDropdown = $("<select class='month-dropdown'></select>");
    var $submitButton = $("<button>Submit</button>");

    for (var year = settings.startYear; year <= settings.endYear; year++) {
      $yearDropdown.append($("<option />").val(year).text(year));
    }

    for (var month = 0; month < 12; month++) {
      $monthDropdown.append($("<option />").val(month).text(monthNames[month]));
    }

    $yearDropdown.val(currentYear);
    $monthDropdown.val(currentMonth);

    $submitButton.on("click", function() {
      settings.onMonthYearSelected($yearDropdown.val(), $monthDropdown.val());
      $container.remove();
    });

    $container.append($yearDropdown).append($monthDropdown).append($submitButton);

    $(this).on("click", function() {
      $("body").append($container);
    });

    return this;
  };
})(jQuery);

To use this plugin, you can simply call it on a jQuery object that represents the element you want to attach the popup to. For example:

Code: Select all

$(document).ready(function() {
  $("#my-input-element").monthYearPicker({
    startYear: 2000,
    endYear: 2025,
    selectedYear: 2021,
    selectedMonth: 4,
    onMonthYearSelected: function(year, month) {
      console.log("Selected year: " + year);
      console.log("Selected month: " + month);
    }
  });
});

This will attach a popup window to the element with the ID "my-input-element", and allow the user to select a year and month between 2000 and 2025. The default selected year is 2021, and the default selected month is May (since months are zero-indexed, 4 corresponds to May). When the user selects a year and month and clicks the "Submit" button, the onMonthYearSelected callback function will be called with the selected year and month as arguments. In this example, we simply log the selected values to the console, but you can modify the callback function to perform any action you like.

CSS styling to make the plugin look more visually appealing:

Code: Select all

.month-year-picker-container {
  position: absolute;
  z-index: 9999;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.year-dropdown, .month-dropdown {
  font-size: 16px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}