jQuery: datepicker - calendar for choosing dates
Posted by: Gennady
This thing can often be found when faced with filling out forms, where you need to enter a date or a range of dates in the right format. The user, he will surely make a mistake and enter the date in the wrong format, then he will figure out where the error is, and then go away completely without filling out the form ... This is to make choosing the date very simple and convenient and this jQuery UI is intended. Calendar, or more precisely, datepicker ...
As always, to begin with a demonstration of examples, and then we will figure out how to use it in ourselves. Clicking on the text field on the left will make the calendar work with the choice of one date. On the right is a calendar with a choice of a date range.
')
Demo
The source code of the example you can see the style sheet that is responsible for displaying the calendar and, if necessary, edit it to fit your design. This part of the code is highlighted with comments / * Styles for jQuery UI Datepicker * /.
The HTML code is nothing interesting - these are simple text input fields. Do not forget that our script will refer to these elements by their identifiers.
And finally, here’s a very simple code that will call the UI Datepicker:
An element with the identifier #example is assigned a simple calendar with a choice of only one date, i.e. these are default settings.
The #exampleRange element has the following options:
rangeSelect : true - just sets the ability to select a range of dates.
yearRange : '2000: 2010' - set the date range of the calendar.
firstDay : 1 - sets the first day of the week, where 1 is Monday.
General settings mass. This includes setting the starting date to be selected when starting the calendar, the ability to set the minimum and maximum allowed dates for selection, and even the ability to set the names of days and months in the native language through options and much more. A complete listing can be found here.
But, to be honest, it seemed to me more appropriate to make some settings directly in the ui.datepicker.js file itself , since it’s quite easy to do this. Moreover, the original file, which can be downloaded on the website of developers, contains all the names in English, and we will use Russian. Make it pretty simple. You need to open the file in a text editor and make a very small translation of the Datepicker () function.
To whom it may seem difficult, he can use my translation. The sample archive includes the datepicker.translate.js file, which contains the translation.
This thing can often be found when faced with filling out forms, where you need to enter a date or a range of dates in the right format. The user, he will surely make a mistake and enter the date in the wrong format, then he will figure out where the error is, and then go away completely without filling out the form ... This is to make choosing the date very simple and convenient and this jQuery UI is intended. Calendar, or more precisely, datepicker ...
As always, to begin with a demonstration of examples, and then we will figure out how to use it in ourselves. Clicking on the text field on the left will make the calendar work with the choice of one date. On the right is a calendar with a choice of a date range.
')
Demo
You can download the source code of the example, and if you have the jQuery library, play this example on your website.
The source code of the example you can see the style sheet that is responsible for displaying the calendar and, if necessary, edit it to fit your design. This part of the code is highlighted with comments / * Styles for jQuery UI Datepicker * /.
The HTML code is nothing interesting - these are simple text input fields. Do not forget that our script will refer to these elements by their identifiers.
And finally, here’s a very simple code that will call the UI Datepicker:
An element with the identifier #example is assigned a simple calendar with a choice of only one date, i.e. these are default settings.
The #exampleRange element has the following options:
rangeSelect : true - just sets the ability to select a range of dates.
yearRange : '2000: 2010' - set the date range of the calendar.
firstDay : 1 - sets the first day of the week, where 1 is Monday.
General settings mass. This includes setting the starting date to be selected when starting the calendar, the ability to set the minimum and maximum allowed dates for selection, and even the ability to set the names of days and months in the native language through options and much more. A complete listing can be found here.
But, to be honest, it seemed to me more appropriate to make some settings directly in the ui.datepicker.js file itself , since it’s quite easy to do this. Moreover, the original file, which can be downloaded on the website of developers, contains all the names in English, and we will use Russian. Make it pretty simple. You need to open the file in a text editor and make a very small translation of the Datepicker () function.
To whom it may seem difficult, he can use my translation. The sample archive includes the datepicker.translate.js file, which contains the translation.
| Ist. |
Source: https://habr.com/ru/post/24369/
All Articles