“Metro DateTime Picker” Documentation by “Federico Ramírez” v1.0


Metro DateTime Picker

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!


Table of Contents

  1. Introduction
  2. Usage
  3. Configuration
  4. Examples

A) Introduction - top

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.


B) Usage - top

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.


C) Configuration Options - top

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

  1. time_format : string: The format in which time selection is displayed
    • 12h: Use 12 hours format, eg: 03:12 pm
    • 24h: Use 24 hours format, eg: 15:12
    • none: Do not display the time boxes
    defaults to: 12h
  2. show_date : boolean: Whether to show the date selection boxes
    • true: Show the boxes
    • false: Don't show the boxes
    defaults to: true
  3. effect : string: The effect used when displaying the boxes
    • fadeIn: Opacity fade, from transparent to solid
    • slideDown: Slides the boxes down from the selected element
    defaults to: fadeIn
  4. position : string: The position in which MDP is displayed, it can either be under the selected element or above it.
    • bottom: Display MDP under the selected element
    • top: Display MDP above the selected element
    defaults to: bottom
  5. boxes.color : string: Sets the color of the boxes, in hexadecimal format.
    defaults to: f4b300 (yellow)
  6. boxes.fontSize : string: Sets the size of the font in the boxes
    defaults to: 13px
  7. boxes.fontFamily : string: Sets the font family of the font in the boxes
    defaults to: Arial, sans-serif
  8. boxes.size : string: Sets the size in pixels of the boxes
    defaults to: 100
  9. visible_boxes : string: When displaying a list of boxes to select an option, select the ammount of visible boxes
    defaults to: 5
  10. months : array: If you don't want to use the default month names you can specify an array containing all the months, useful for translating.
    defaults to: ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER']
  11. minutes_skip: integer How many minutes will be skipped on each iteration, for example, if set to 10, it will only display "10 20 30 40 50", for 5 it will display "5 10 15 20 25 30 35 40 45 50 55".
    defaults to: 5
  12. format : string: Sets the format of the date to be inserted into the selected element, it's important to note the following replacements
    • {da}: Will be replaced with the selected day, eg: 28
    • {mo}: Will be replaced with the selected month, eg: 05
    • {ye}: Will be replaced with the selected year, eg: 2014
    • {ho}: Will be replaced with the selected hour, eg: 11
    • {mi}: Will be replaced with the selected minutes, eg: 58
    • {me}: Will be replaced with the selected meridian, AM or PM eg: PM

    defaults to: "{da}/{mo}/{ye} {ho}:{mi} {me}"
  13. scroll_speed: string or integer: How fast will the boxes scroll down to the selected one, it can be either a string or a number.
    • fast
    • slow

    defaults to: fast
  14. initial_value: object: The initial datetime for MDP
    • day: 1-31
    • month: 1-12
    • year: 1950-current year
    • hour: 0-23 or 1-11 depending on time format
    • minutes: 0-59
    • ampm: 'am' or 'pm'

    defaults to:
    {
        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>

D) Examples - top

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

Go To Table of Contents