Date Selector

HTML Date Selector

I made a date selector in HTML, which accounts for leap years and the number of days in each month. I am relatively new to javascript / HTML so please critique it as much as possible.

\$\begingroup\$ I’m not gonna wrote an answer from my phone while I’m poopin but you should put these functions together on a constructor or class and separate the DOM from the logic so you can reuse this. \$\endgroup\$

\$\begingroup\$ @bstrauch24 This is incorrectly reporting February as having 29 days in 2001-3, 2005-7, 2009-11, 2013-15, and 2017 (that I’ve checked), and is also incorrectly reporting February as having 28 days in 2004, 2008, 2012 and 2016. Perhaps you meant return year % 4 === 0; in the leapYear method. \$\endgroup\$

\$\begingroup\$ @Iwrestledabearonce. Can you elaborate on how you would separate this into a javascript class? I like the idea of reusability, but how would you start? \$\endgroup\$

1 Answer 1

I didn’t pay much attention to your logic, but focusing on this question:

Can you elaborate on how you would separate this into a javascript class? I like the idea of reusability, but how would you start?

I would start by abstracting the DOM references in the code. Maybe just pass it a single div or span and then generate the select boxes dynamically for maximum reusability.

Then I would combine the methods into a class or constructor of some sort because if you have a function in your code called clear , for example, later on you might have a hard time figuring out what that does. datepicker.clear() is much more descriptive than just clear()

Here’s an example of how you might accomplish this:

function DatePicker(element, days, startyear, endyear) < // Create the markup this.monthElement = document.createElement("select"); this.dayElement = document.createElement("select"); this.yearElement = document.createElement("select"); this.monthElement.onChange = this.update; this.yearElement.onChange = this.update; element.appendChild(this.monthElement); element.appendChild(this.dayElement); element.appendChild(this.yearElement); this.createMonths(); this.createDays(days); this.createYears(startyear, endyear); >DatePicker.prototype.clear = function(select) < for (var i = select.options.length - 1; i >= 0; i--) < select.remove(i); >>; DatePicker.prototype.createMonths = function() < var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; for (var i = 0; i < 12; i++) < var option = document.createElement("option"); option.text = months[i]; this.monthElement.add(option); >>; DatePicker.prototype.createDays = function(days) < var index = this.dayElement.options.selectedIndex; if (index < 0) index = 0; if (index >= days) index = days - 1; this.clear(this.dayElement); for (var day = 1; day this.dayElement.options.selectedIndex = index; >; DatePicker.prototype.createYears = function(start, end) < for (var year = end; year >= start; year--) < var option = document.createElement("option"); option.text = year; this.yearElement.add(option); >>; DatePicker.prototype.leapYear = function(year) < if (year % 400 == 0) return true; if (year % 100 == 0) return false; return year % 4 == 0; >; DatePicker.prototype.update = function() < var month = this.monthElement.options.selectedIndex + 1; if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) < this.createDays(31); >else if (month == 4 || month == 6 || month == 9 || month == 11) < this.createDays(30); >else < var options = this.yearElement.options; var year = options[options.selectedIndex].text; if (this.leapYear(year)) < this.createDays(29); >else < this.createDays(28); >> >; 

Then you can call it like this

var today = new Date(); var year = today.getFullYear(); // Send it a reference to a single element and create the markup in the constructor, // That way you don't have to rely on the user creating the correct markup var dp = document.getElementById('datePicker'); var dPicker = new DatePicker(dp, 31, year - 100, year); 

Источник

CSS date selector

Attached is a mockup and my current solution. The problem is when two numbers are next to each other (horizontal or vertical) they should merge as shown in the mockup. EX: selected numbers 48-49-50 should be like: numbers 38-39-40-41 from the next screenshot I use AddClass(«active») with the following parameters for each clicked number:

1 Answer 1

You can achieve this merge by using CSS selectors and using javascript. Since you used the jQuery tag, I used that for easy coding.

The solution looks at the clicked element and also his siblings in positions +-10 and +-1. Accordingly, it sets a merge. Comments were added in the code, hope it helps. Feel free to ask any questions.

$(document).ready(function() < var awesomeDates = $(".awesome-date"); awesomeDates.on("click", function()< //Some variables to store the siblings in. var prevElement, nextElement, topElement, bottomElement; // basically toggleClass if($(this).hasClass("active"))< $(this).removeClass("active"); prevElement = $(this).prev(); //if the element before was merged with the currently clicked list-item if(prevElement.hasClass("merge-right"))< //unmerge prevElement.removeClass("merge-right"); >//select element 10 siblings back topElement = $(this).prevAll().eq(9); //if the element above was merged if(topElement.hasClass("active")) < //remove merge classes for both $(this).removeClass("merge-top"); topElement.removeClass("merge-bottom"); >//select element 10 siblings ahead bottomElement = $(this).nextAll().eq(9); //if the currently clicked element was merged with element underneath if(bottomElement.hasClass("active")) < //Unmerge both $(this).removeClass("merge-bottom"); bottomElement.removeClass("merge-top"); >>else < $(this).addClass("active"); prevElement = $(this).prev(); nextElement = $(this).next(); //if direct siblings are also active if(prevElement.hasClass("active"))< //Merge prevElement.addClass("merge-right"); >if(nextElement.hasClass("active")) < //Merge $(this).addClass("merge-right"); >//select element 10 siblings back topElement = $(this).prevAll().eq(9); //if the element above is also active if(topElement.hasClass("active")) < //Merge $(this).addClass("merge-top"); topElement.addClass("merge-bottom"); >//select element 10 siblings ahead bottomElement = $(this).nextAll().eq(9); //if the element below is also active if(bottomElement.hasClass("active")) < //Merge $(this).addClass("merge-bottom"); bottomElement.addClass("merge-top"); >> >); >);

.dater < display: block; width: 330px; height: 250px; background-color: #f7f7f7; >.dater-list < margin: 0; padding: 2px; height: auto; >.dater-list .awesome-date < display: inline-block; float: left; width: 20px; height: 20px; padding: 5px; border-radius: 50%; text-align: center; background-color: #fff; margin: 1px 1px 0 1px; transition: all 1s ease; >.dater-list .awesome-date.active < background-color: #1abc9c; color: #fff; >/* ALL elements except for every number dividable by 10 + 1*/ .dater-list li.awesome-date.active + li.awesome-date.active:not(:nth-child(10n+1)) < border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; padding-left: 6px; >/* ALL elements with class merge-right except for every number dividable by 10 */ .dater-list li.awesome-date.active.merge-right:not(:nth-child(10n)) < border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: 0; padding-right: 6px; >/* ALL elements with class merge-top except for the first row/10 elements */ .dater-list li.awesome-date.active.merge-top:not(:nth-child(-n+10)) < border-top-right-radius: 0; border-top-left-radius: 0; margin-top: 0; padding-top: 6px; >/* ALL elements with class merge-bottom except filter not needed and hence not applied */ .dater-list li.awesome-date.active.merge-bottom

Ps. Next time add HTML and CSS yourself please.

Источник

How to Add a Date Picker in HTML?

The date picker in HTML is used to create an interactive input (a dropdown) which is used to select a date instead of typing it manually. The date picker in HTML is created using the element of type=”date” , this creates an input field in the HTML document, which allows us to type the date manually and it will validate the input or we can enter using the date picker interface.

What We are Creating?

We can see the demo in the gif below:

• So we can create the interactive dropdown like the above example to select a date from the calendar using the date picker in html.
• The syntax of the date picker is:
• We can select the date month and year using this.

Note 1: Using the will only select a date, month, and year, but if we want to enter the time also then we can use this will allow us to select the time also.

Note 2: The displayed date format in the date picker dropdown depends on the browser of the user, but the value is always formatted like yyyy-mm-dd format.

How to Add a Date Picker in HTML?

To add a date picker in html we have to write with others like id, value, etc as per the requirements.

Generally, a picker is added like this:

This will create a date picker like this:

If we want to create a date picker that includes a dropdown to select the time also, we have to use .

This will create a date picker in html like this:

How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Usually, a calendar sign appears in the top right of the date input block, clicking on this icon opens the calendar drop down, but if we want to open this date picker by clicking anywhere inside the input we can do using the below code.

We can add this CSS code to our document and now we will be able to open the date picker in html by clicking anywhere inside the input.

Additional Attributes for Date Picker

The date picker have all the common attributes that are supported by input element, but it also have some additional attributes min, max, value, etc Value attribute: We can set the default value for the date picker in html using the value attribute like this:

Here we can see the input have the default date, which is set in the value attribute. Clicking on the calendar icon will open a date picker like this.

Min attribute: We can set the earliest date in the min attribute, so any date earlier than this specified date will not be accepted. If the date specified in min is not a possible date in yyyy-mm-dd then the element will not have any minimum date value.

Here, we can see that the calendar has disabled the previous button (up arrow) because we have set the minimum date. Therefore we cannot select any date before the specified date.

Max attribute: We can set a maximum date in the max attribute, so any date after the date specified will not be allowed. If the date specified in the max is not a possible date in yyyy-mm-dd then the input element has no maximum date value.

Here, we can see that the calendar has disabled the next button (down arrow) because we have set the maximum date. Therefore we cannot select any date after the specified date.

Step attribute: we can use the step attribute to set a step value so that only date that are skipped using the step value are allowed, for example, if we set step=”2” then we will be able to select only alternate days. This can be helpful in case like when we want the user to select date which is on monday.

Here, we can see that all the alternate days are disabled this is because we have specified step=»2″.

Browser Support

The list of browsers that support date picker in html is listed below:

Conclusion

• A date picker in html is used to create an interactive dropdown that allows us to select a date from the calendar.
• We can add a date picker by writing
• If we want to take date as well as time in input we can write datetime-local instead of date like
• We can set a default date using the value attribute like this
• We can set a minimum and maximum date using min and max attribute respectively.
• We can use the step attribute to set a step value for the date picker in html.

Источник

HTML

The resulting value includes the year, month, and day.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Attribute
type=»date»	20.0	12.0	57.0	14.1	11.0

Syntax

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник