Wednesday, 18 September 2024

WRITE A JAVASCRIPT TO READ DATE AND PEFORM DAY NO YEAR MONTH

Write a JavaScript program to read a date from user and perform the following, if entered value is date then perform the following

 

1.Display the day no from the date

2.Display the year from the date

3.Display the month from the date

4.Change the date to next day

5.Change the year to next year

6.change the month to next month 


<html>

  <head>

<style type="text/css">

td{text-align:center;

}

}

</style>

  <script>

      function processDate() 

{

        var dateInput = document.getElementById("dateInput").value;

        var date = new Date(dateInput);


        

        document.getElementById("day").value = date.getDate();


        

        document.getElementById("year").value = date.getFullYear();


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

        document.getElementById("month").value = monthNames[date.getMonth()];


        var nextDay = new Date(date);

        nextDay.setDate(nextDay.getDate() + 1);

        document.getElementById("nextDay").value = nextDay.toLocaleDateString();


        var nextYear = new Date(date);

        nextYear.setFullYear(nextYear.getFullYear() + 1);

        nextYear.setDate(date.getDate());

        document.getElementById("nextYear").value = nextYear.toLocaleDateString();


        var nextMonth = new Date(date);

        nextMonth.setMonth(nextMonth.getMonth() + 1);

        nextMonth.setDate(date.getDate());

        document.getElementById("nextMonth").value = nextMonth.toLocaleDateString();

      }

    </script>

</head>

<body>

<h3 align="center"> <input type="date" id="dateInput"> </td>

    <button onclick="processDate()"> Process Date </button> </h3>

    <table border="1" align="center"> 

<tr> 

<td> Day: </td>

<td> <input type="text" id="day"> </td>

</tr>

<tr>

<td> Year: </td>

<td> <input type="text" id="year"> </td>

</tr>

<tr>

<td> Month: </td>

<td> <input type="text" id="month"> </td>

</tr>

    <tr>

<td> Next Day: </td>

<td> <input type="text" id="nextDay"> </td>

</tr>

<tr>

<td> Next Year: </td>

<td> <input type="text" id="nextYear"> </td>

</tr>

<tr>

<td> Next Month: </td>

<td> <input type="text" id="nextMonth"> </td>

</tr>

</table>

  </body>

</html>

No comments:

Post a Comment