Posting The Following Weeks or Months From an Input Date Selector - HTML JavaScript
Question
I'm trying to get a date input to output the following weeks or months depending on what has been selected. However, I'm having three issues with this.
Issue 1 SOLVED - I'm trying to set it up with a class to hide the week output if the month is selected and vice-versa; when the submit button is clicked. However, the results just make everything on the page disappears. Not sure why?
Issue 2 - This is more of a method issue than a current error. I'm stuck with the method to get the weeks or the months to print in the ID'd paragraphs corresponding to the entered date.
Issue 3 SOLVED - I'm getting invalid date in my date selector, all I wanted was the current date. So I left it blank but due to the fact that I've changed the way it displays the date being DD/MM/YYYY it's causing this issue.
$("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format(this.getAttribute("data-date-format")) ) }).trigger("change") function submit() { var type = document.getElementById("selectType").value; if (type == "Months") { document.getElementById("outputMonths").className = "output"; document.getElementById("outputWeeks").className = "hidden"; } else { document.getElementById("outputMonths").className = "hidden"; document.getElementById("outputWeeks").className = "output"; } }
input { position: relative; width: 150px; height: 20px; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; } .output { padding: 10px; border: 1px solid black; } .hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <html> <body> <form> <div> <lable>Start Date:</lable><br> <input type="date" data-date="" data-date-format="DD/MM/YYYY" value=""> </div> <div> <br> <select id="selectType"> <option value="Months">Months</option> <option value="Weeks">Weeks</option> </select> </div> <div> <br><input type="button" id="btnSubmit" onclick="submit()" value="Submit"> </div> <div id="output" class=""> <h3>Output - 1 Year:</h3> <div id="outputMonths" class="output hidden"> <label>Date 1: </label> <p id="dataM1">DD/MM/YYYY</p> <label>Date 2: </label> <p id="dataM2">DD/MM/YYYY</p> <label>Date 3: </label> <p id="dataM3">DD/MM/YYYY</p> <label>Date 4: </label> <p id="dataM4">DD/MM/YYYY</p> <label>Date 5: </label> <p id="dataM5">DD/MM/YYYY</p> <label>Date 6: </label> <p id="dataM6">DD/MM/YYYY</p> <label>Date 7: </label> <p id="dataM7">DD/MM/YYYY</p> <label>Date 8: </label> <p id="dataM8">DD/MM/YYYY</p> <label>Date 9: </label> <p id="dataM9">DD/MM/YYYY</p> <label>Date 10: </label> <p id="dataM10">DD/MM/YYYY</p> <label>Date 11: </label> <p id="dataM11">DD/MM/YYYY</p> <label>Date 12: </label> <p id="dataM12">DD/MM/YYYY</p> </div> <div id="outputWeeks" class="output hidden"> <label>Date 1: </label> <p id="dataW1">DD/MM/YYYY</p> <label>Date 2: </label> <p id="dataW2">DD/MM/YYYY</p> <label>Date 3: </label> <p id="dataW3">DD/MM/YYYY</p> <label>Date 4: </label> <p id="dataW4">DD/MM/YYYY</p> <label>Date 5: </label> <p id="dataW5">DD/MM/YYYY</p> <label>Date 6: </label> <p id="dataW6">DD/MM/YYYY</p> <label>Date 7: </label> <p id="dataW7">DD/MM/YYYY</p> <label>Date 8: </label> <p id="dataW8">DD/MM/YYYY</p> <label>Date 9: </label> <p id="dataW9">DD/MM/YYYY</p> <label>Date 10: </label> <p id="dataW10">DD/MM/YYYY</p> <label>Date 11: </label> <p id="dataW11">DD/MM/YYYY</p> <label>Date 12: </label> <p id="dataW12">DD/MM/YYYY</p> <label>Date 13: </label> <p id="dataW13">DD/MM/YYYY</p> <label>Date 14: </label> <p id="dataW14">DD/MM/YYYY</p> <label>Date 15: </label> <p id="dataW15">DD/MM/YYYY</p> <label>Date 16: </label> <p id="dataW16">DD/MM/YYYY</p> <label>Date 17: </label> <p id="dataW17">DD/MM/YYYY</p> <label>Date 18: </label> <p id="dataW18">DD/MM/YYYY</p> <label>Date 19: </label> <p id="dataW19">DD/MM/YYYY</p> <label>Date 20: </label> <p id="dataW20">DD/MM/YYYY</p> <label>Date 21: </label> <p id="dataW21">DD/MM/YYYY</p> <label>Date 22: </label> <p id="dataW22">DD/MM/YYYY</p> <label>Date 23: </label> <p id="dataW23">DD/MM/YYYY</p> <label>Date 24: </label> <p id="dataW24">DD/MM/YYYY</p> <label>Date 25: </label> <p id="dataW25">DD/MM/YYYY</p> <label>Date 26: </label> <p id="dataW26">DD/MM/YYYY</p> <label>Date 27: </label> <p id="dataW27">DD/MM/YYYY</p> <label>Date 28: </label> <p id="dataW28">DD/MM/YYYY</p> <label>Date 29: </label> <p id="dataW29">DD/MM/YYYY</p> <label>Date 30: </label> <p id="dataW30">DD/MM/YYYY</p> <label>Date 31: </label> <p id="dataW31">DD/MM/YYYY</p> <label>Date 32: </label> <p id="dataW32">DD/MM/YYYY</p> <label>Date 33: </label> <p id="dataW33">DD/MM/YYYY</p> <label>Date 34: </label> <p id="dataW34">DD/MM/YYYY</p> <label>Date 35: </label> <p id="dataW35">DD/MM/YYYY</p> <label>Date 36: </label> <p id="dataW36">DD/MM/YYYY</p> <label>Date 37: </label> <p id="dataW37">DD/MM/YYYY</p> <label>Date 38: </label> <p id="dataW38">DD/MM/YYYY</p> <label>Date 39: </label> <p id="dataW39">DD/MM/YYYY</p> <label>Date 40: </label> <p id="dataW40">DD/MM/YYYY</p> <label>Date 41: </label> <p id="dataW41">DD/MM/YYYY</p> <label>Date 42: </label> <p id="dataW42">DD/MM/YYYY</p> <label>Date 43: </label> <p id="dataW43">DD/MM/YYYY</p> <label>Date 44: </label> <p id="dataW44">DD/MM/YYYY</p> <label>Date 45: </label> <p id="dataW45">DD/MM/YYYY</p> <label>Date 46: </label> <p id="dataW46">DD/MM/YYYY</p> <label>Date 47: </label> <p id="dataW47">DD/MM/YYYY</p> <label>Date 48: </label> <p id="dataW48">DD/MM/YYYY</p> <label>Date 49: </label> <p id="dataW49">DD/MM/YYYY</p> <label>Date 50: </label> <p id="dataW50">DD/MM/YYYY</p> <label>Date 51: </label> <p id="dataW51">DD/MM/YYYY</p> <label>Date 52: </label> <p id="dataW52">DD/MM/YYYY</p> </div> </div> </form> </body> </html>
1 answers
solution1
0 ACCPTED 2018-05-31 18:33:06
I'm confused about what you are trying to achieve. I have fixed the default date value to be set to todays date and I fixed the whole page hiding when you click submit. Please advise on what else you are looking to do:
document.getElementById('datePicker').valueAsDate = new Date(); $("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format(this.getAttribute("data-date-format")) ) }).trigger("change") function submit() { var type = document.getElementById("selectType").value; if (type === "Months") { document.getElementById("outputMonths").className = "output"; document.getElementById("outputWeeks").className = "hidden"; } else { document.getElementById("outputMonths").className = "hidden"; document.getElementById("outputWeeks").className = "output"; } }
input { position: relative; width: 150px; height: 20px; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; } .output { padding: 10px; border: 1px solid black; display: block; } .hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <html> <body> <div> <lable>Start Date:</lable><br> <input type="date" id="datePicker" data-date="" data-date-format="DD/MM/YYYY" /> </div> <div> <br> <select id="selectType"> <option value="Months">Months</option> <option value="Weeks">Weeks</option> </select> </div> <div> <br><input type="submit" id="btnSubmit" value="Submit" onclick="submit()"> </div> <div id="output" class=""> <h3>Output - 1 Year:</h3> <div id="outputMonths" class="output hidden"> <label>Date 1: </label> <p id="dataM1">DD/MM/YYYY</p> <label>Date 2: </label> <p id="dataM2">DD/MM/YYYY</p> <label>Date 3: </label> <p id="dataM3">DD/MM/YYYY</p> <label>Date 4: </label> <p id="dataM4">DD/MM/YYYY</p> <label>Date 5: </label> <p id="dataM5">DD/MM/YYYY</p> <label>Date 6: </label> <p id="dataM6">DD/MM/YYYY</p> <label>Date 7: </label> <p id="dataM7">DD/MM/YYYY</p> <label>Date 8: </label> <p id="dataM8">DD/MM/YYYY</p> <label>Date 9: </label> <p id="dataM9">DD/MM/YYYY</p> <label>Date 10: </label> <p id="dataM10">DD/MM/YYYY</p> <label>Date 11: </label> <p id="dataM11">DD/MM/YYYY</p> <label>Date 12: </label> <p id="dataM12">DD/MM/YYYY</p> </div> <div id="outputWeeks" class="output hidden"> <label>Date 1: </label> <p id="dataW1">DD/MM/YYYY</p> <label>Date 2: </label> <p id="dataW2">DD/MM/YYYY</p> <label>Date 3: </label> <p id="dataW3">DD/MM/YYYY</p> <label>Date 4: </label> <p id="dataW4">DD/MM/YYYY</p> <label>Date 5: </label> <p id="dataW5">DD/MM/YYYY</p> <label>Date 6: </label> <p id="dataW6">DD/MM/YYYY</p> <label>Date 7: </label> <p id="dataW7">DD/MM/YYYY</p> <label>Date 8: </label> <p id="dataW8">DD/MM/YYYY</p> <label>Date 9: </label> <p id="dataW9">DD/MM/YYYY</p> <label>Date 10: </label> <p id="dataW10">DD/MM/YYYY</p> <label>Date 11: </label> <p id="dataW11">DD/MM/YYYY</p> <label>Date 12: </label> <p id="dataW12">DD/MM/YYYY</p> <label>Date 13: </label> <p id="dataW13">DD/MM/YYYY</p> <label>Date 14: </label> <p id="dataW14">DD/MM/YYYY</p> <label>Date 15: </label> <p id="dataW15">DD/MM/YYYY</p> <label>Date 16: </label> <p id="dataW16">DD/MM/YYYY</p> <label>Date 17: </label> <p id="dataW17">DD/MM/YYYY</p> <label>Date 18: </label> <p id="dataW18">DD/MM/YYYY</p> <label>Date 19: </label> <p id="dataW19">DD/MM/YYYY</p> <label>Date 20: </label> <p id="dataW20">DD/MM/YYYY</p> <label>Date 21: </label> <p id="dataW21">DD/MM/YYYY</p> <label>Date 22: </label> <p id="dataW22">DD/MM/YYYY</p> <label>Date 23: </label> <p id="dataW23">DD/MM/YYYY</p> <label>Date 24: </label> <p id="dataW24">DD/MM/YYYY</p> <label>Date 25: </label> <p id="dataW25">DD/MM/YYYY</p> <label>Date 26: </label> <p id="dataW26">DD/MM/YYYY</p> <label>Date 27: </label> <p id="dataW27">DD/MM/YYYY</p> <label>Date 28: </label> <p id="dataW28">DD/MM/YYYY</p> <label>Date 29: </label> <p id="dataW29">DD/MM/YYYY</p> <label>Date 30: </label> <p id="dataW30">DD/MM/YYYY</p> <label>Date 31: </label> <p id="dataW31">DD/MM/YYYY</p> <label>Date 32: </label> <p id="dataW32">DD/MM/YYYY</p> <label>Date 33: </label> <p id="dataW33">DD/MM/YYYY</p> <label>Date 34: </label> <p id="dataW34">DD/MM/YYYY</p> <label>Date 35: </label> <p id="dataW35">DD/MM/YYYY</p> <label>Date 36: </label> <p id="dataW36">DD/MM/YYYY</p> <label>Date 37: </label> <p id="dataW37">DD/MM/YYYY</p> <label>Date 38: </label> <p id="dataW38">DD/MM/YYYY</p> <label>Date 39: </label> <p id="dataW39">DD/MM/YYYY</p> <label>Date 40: </label> <p id="dataW40">DD/MM/YYYY</p> <label>Date 41: </label> <p id="dataW41">DD/MM/YYYY</p> <label>Date 42: </label> <p id="dataW42">DD/MM/YYYY</p> <label>Date 43: </label> <p id="dataW43">DD/MM/YYYY</p> <label>Date 44: </label> <p id="dataW44">DD/MM/YYYY</p> <label>Date 45: </label> <p id="dataW45">DD/MM/YYYY</p> <label>Date 46: </label> <p id="dataW46">DD/MM/YYYY</p> <label>Date 47: </label> <p id="dataW47">DD/MM/YYYY</p> <label>Date 48: </label> <p id="dataW48">DD/MM/YYYY</p> <label>Date 49: </label> <p id="dataW49">DD/MM/YYYY</p> <label>Date 50: </label> <p id="dataW50">DD/MM/YYYY</p> <label>Date 51: </label> <p id="dataW51">DD/MM/YYYY</p> <label>Date 52: </label> <p id="dataW52">DD/MM/YYYY</p> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to get weeks as an array for past 2 months from current date in javascript?
Javascript add days, weeks or months to date of today
Auto end date by selecting number of weeks or months from start date
Calculate Perod in year months days in javascript when from and to date is input
Get days, weeks, months from a number of days in javascript
javascript Countdown timer with weeks and months
Get weeks from start and end date in javascript
HTML: Input type date and range of months
Javascript - get a date from an HTML input
Convert input date to string from HTML to javascript
Related Tags