Date Picker Mockup / Prototype

I was just testing how can I use the Grid Table to display a Date Picker or chooser.

Thats when I realized the magic of a solid foundation for the grid table. By just changing the column heading, margins, line spacing and numeric data that represents the month days, the mockup of a date picker turned out pretty slick


The above is a true widget and not a mere static icon. You can change the content to represent any month. A true HTML5 canvas based Date picker prototype.

The benefits are tremendous as you can change the look and feel and also the the size of the date chooser. Why just have a square of 200 X 200. You could design a prototype of a scheduling or calendar type application by going to a larger size

Here is a slightly larger version


So this mockup exercise using a grid table saved the labour of inventing or creating a static date calendar icon or image. I rather included a new clone of the grid table with a predefined set of column data. By cloning the grid table for use as Date chooser, you still get all the modifier options like Row banding, vertical lines etc

Related posts:

  1. Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?
  2. Mockup Update : Integrated Vector Icons and Project Browser
  3. Mockups update: Projects and Mockup save feature

Get MockupTiger downloaded on your PC

Posted in Tutorials

Would you like to build your application?

Start by sketching your idea into a wireframe in few clicks