Created: 19 feb 2014
By: Federico Ramírez
Email: fedra.arg@gmail.com
Thank you for purchasing Metro DateTiem picker! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Hello! And again, thanks for purchasing Metro DateTime Picker! Metro DateTime Picker is a jQuery plugin which enables the user to easily pick a date, a time, or both in a clean and beautiful way.
But why explain when you can see for yourself! Below you can see an empty text input, just click on it to use Metro DateTime picker to select both a date and a time.
The picker is inspired by Microsoft's metro design pattern, and particularly the date and time picker for Windows Phone.
To use Metro DateTime Picker all you need to do is include jQuery and the metro-datetime-picker.js file provided in the zip file.
There are two implementations of MDP (Metro DateTime Picker), a development version and a minified version. The minified version is a compressed and obfuscated version of MDP (metro-datetime-picker.min.js), meaning it's lighter and very hard to read the source code, this is the file you should use for your website as it will load much faster than the development version, the latter is designed to be used while you are developing as Javascript will throw more meaningful errors.
Below you can see an example on how to enable a basic MDP
<!-- Include jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include MDP, minified version -->
<script src="js/metro-datetime-picker.min.js"></script>
<script>
// enable MDP on the element with id "picker"
$('#picker').metroDateTimePicker();
</script>
That's it! There are of course some configuration options you can use, but with only that line of code you get a fully functional MDP.
You can customize each MDP instance, change the color, font size, font family, size of the boxes, etc.
Here is a list of all possible configuration options
{ day: 1 month: 1 year: new Date().getFullYear() hour: 12 minute: 0 ampm: 'am' }
Once you have chosen the options you want simply pass them when instantiating MDP
<!-- Include jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include MDP, minified version -->
<script src="js/metro-datetime-picker.min.js"></script>
<script>
// enable MDP on the element with id "picker"
$('#picker').metroDateTimePicker({ 'format': '{da}-{mo}-{ye} {ho}:{mi} {me}', 'effect': 'slideDown', 'boxes': { 'size': 150, 'color': 123546 // dark blue } });
</script>
Below you can find several examples of MDP different configurations
{ 'format': '{da}-{mo}-{ye} {ho}:{mi} {me}', 'effect': 'slideDown', 'boxes': { 'size': 75, 'fontSize': '11px', 'color': '123546', // dark blue 'fontColor': 'ffffff' } }
{ 'format': '{ye} {mo} {da} {ho}:{mi}', 'time_format': '24h', 'minutes_skip': 1, 'months': ['ENERO', 'FEBRERO', 'MARZO', 'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO', 'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'] }
{ 'initial_value': { 'day': 28, 'month': 2, 'year': 1990 }, 'position': 'top', 'format': '{ye}-{mo}-{da}', 'time_format': 'none' }
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
Federico Ramírez