📜 ⬆️ ⬇️

DatePalette - a framework that creates a UI for the user to work with the date in the browser

Date is an extremely inconvenient thing to work with in terms of creating a UI.

Not only is it composite (year, month, day), and its components are not multiple to each other. So it is also quite large, but it requires ambitious accuracy - entering the year of birth in the drop-down list, if you are over 8 years old, the task is to train willpower.

My (second) solution to the problem (update)

')
For the most impatient - yes, there is a functioning demo - jsfiddle.net/Meettya/aDAsa/embedded/result



Why this post is written - in fact, I'm not a UI developer, and certainly not a designer. I need a fitback, criticism and requests from experts working on creating websites. Make a good product, picking in the sandbox - difficult. Your help would be useful.

Disclaimer - while it is a prototype. There are a lot of fun bikes in the code, css is worthy of admiration, you need to allow a bunch of dependencies, etc. Take it stoically. And yes, it only works on IE8 and higher.

How it works - well, actually quite difficult, but I tried to make the interface as simple as possible.

For example, to the object

<input id="date_palette_one" type="text" name="date_palette_one" readonly> 

we just fasten the initializer

  var DatePalette = require('datepalette'); DatePalette.init("#date_palette_one", function() { $("#date_palette_one").val(this.getResult()); return null; }); 

And we get a beautiful pop-up window, as in the screenshot, by clicking in which the value of the date of our input changes on the fly.

But this is not just a datapicher, this is exactly a framework. View, behavior and content of the piker is configurable. In addition, it is possible to create custom piker assemblies with the inclusion of only the necessary elements.

Here is another variant of the picker, inline and containing only the month and year, obtained from a standard object with different settings.



The main advantages of the resulting product:

Please comment on the result. I will be especially glad to criticism and suggestions / wishes. The questions will not interfere either, it will be easier to write the imputed Readme with them, as long as it is not clear to me that it may not be clear.

Source code is available on github - github.com/Meettya/DatePalette

Everything will be distributed under the MIT license.

Ps. If someone has a desire to help with the project - help with the visual part would be useful - css and layout.

Ps. The first shameful option that caused the jubilation of fans, leave for history

Source: https://habr.com/ru/post/156553/


All Articles