how to get date-picker (only month and year) and display it in mozilla firefox-CodePudding

I want create input fields where user can add month and year. I try with (see below), but Mozilla Firefox doesn't support.

<input type="month" id="start" name="start">

Does anyone know the alternative how can I add month and year for all browsers ?

CodePudding user response：

Either you can try

The first method

// define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');

try {
  test.type = 'month';
} catch (e) {
  console.log(e.description);
}

// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // get the current year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for(var i = 0; i <= 100; i  ) {
    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);
  }
}

<form>
  <div >
    <label for="month-visit">What month would you like to visit us?</label>
    <input type="month" id="month-visit" name="month-visit">
    <span ></span>
  </div>
  <p >What month would you like to visit us?</p>
  <div >
    <div>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
        </select>
      </span>
    </div>
  </div>
</form>

Or using an JS library

http://jsfiddle.net/yLjDH/

CodePudding user response：

ANSWER

— setDate() sets the day of the month of a date.

const d = new Date();
d.setDate(0);

— Set the day of the month in a specified date:

const d = new Date("July 21, 1983 01:15:00");
d.setDate(15);

— The setMonth() method sets the month of a date object. Note: January is 0, February is 1, and so on.

Set the month to 4 (May):

const d = new Date();
d.setMonth(4);

— Set the month to 4 (May) and the day to 20:

const d = new Date();
d.setMonth(4, 20);

— setFullYear() sets the year of a date. setFullYear() can also set month and day.

const d = new Date();
d.setFullYear(2020);

const d = new Date();
d.setFullYear(2020, 10, 3);

CodePudding user response：

ANSWER

To set and get the input type date in dd-mm-yyyy format we will use type attribute. The type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from. If min and max values are not set then default min value is set to “01-01-1920” and default max value is set to “01-01-2120”.

body {
    text-align: center;
}
h1 {
    color: green;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h3>Get input date in dd-mm-yyyy format</h3>
    
    <label for="start"> Enter the Date: </label>
    
    <input type="date" name="begin" 
        placeholder="dd-mm-yyyy" value=""
        min="1997-01-01" max="2030-12-31">
</body>
</html>