Follow us

Friday, March 11, 2011

Javascript Calendar / DateTime Picker

By Default, the Date Format is MM-dd-YYYY. However, it supports all the common date formats used around.
Available Date Formats for DateTime Picker are as follows:
Date Style Format Parameter for DateTime Picker
03-31-2011 MM-dd-YYYY MMddyyyy
31-03-2011 dd-MM-YYYY ddMMyyyy
2011-03-31 YYYY-MM-dd yyyyMMdd
Mar-31-2011 MMM-dd-YYYY MMMddyyyy
31-Mar-2011 dd-MMM-YYYY ddMMMyyyy
2011-Mar-31 YYYY-MMM-dd yyyyMMMdd

Steps

Include the Javascript file

<script src="Scripts/DateTimePicker.js" type="text/javascript"></script>

Put all the images in a folder named 'Image'.

However, you can change the path of folder where images are stored and change its reference in javascript file. You can change other configurable settings by making changes in javascript file.

HTML Formation

<input type="text" id="txtDate" readonly="readonly">
 <img src="Image/cal.gif" style="cursor: pointer;" onclick="javascript:NewCssCal('txtDate')" />

Demo

DateTime Picker Demo
Demo Configuration Comments
onclick="javascript:NewCssCal('Text1')" Default Format - (MM-dd-YYYY)
onclick="javascript:NewCssCal ('Text2','ddMMyyyy')" Format - (dd-MM-YYYY) with dropdown control
onclick="javascript:NewCssCal('Text3','ddMMMyyyy')" Format - (dd-MMM-YYYY)
onclick="javascript:NewCssCal('Text4','mmddyyyy','arrow')" Arrow Month-Year Navigation
onclick="javascript:NewCssCal('Text5','ddMMyyyy','dropdown',true,'12',true)" 12 hour format, with Seconds
onclick="javascript:NewCssCal('Text6','ddMMyyyy','dropdown',true,'12')" 12 hour format, without Seconds
onclick="javascript:NewCssCal('Text7','ddMMyyyy','dropdown',true,'24',true)" 24 hour format, with Seconds

Download the sample (also include javascript file and images)

Sr.No Download Size
1 DateTime Picker 13.03 KB

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

9 comments: on "Javascript Calendar / DateTime Picker"

venkata said...

working good but one thing if i want two or more different date formats in the same date field. like mm-dd-yyyy, mm/dd/yyyy formats in one datefield how can it work.

Technoscatter - Drive To Technology said...

just make need to makes changes to the code in DateTimePicker.js file

var DateSeparator = "-"; //Date Separator, you can change it to "/" as you wish

JinYuan said...

how do i disable the time navigation?

Aashish said...

Calendars without time Navigation is also there.

Just go through the demo part first.

Nisha Rathod said...

datetime dailog is hiding behind the container dailog..
please help..

a_gov said...

im trying to change the calender do display first day as sunday

by changing the var: mondayFirstDay to False
but it doesnt help..
it still shows me the calender with the first day monday

what should be done?

thanks

a_gov said...

sorry, things worked out..
I just needed to close my browser and restart the tomcat.

Sebastien MALOT said...

Another lib for a datetime picker :

http://www.malot.fr/bootstrap-datetimepicker/demo.php

You can use this one easily on a smartphone. Effectively, on smartphone or tablet, the current plugin doesn't correctly slide the hours and minutes ...

Adebayo Olaonipekun said...

how can I pass the onclick="javascript:NewCssCal('Text7','ddMMyyyy','dropdown',true,'24',true)"
to a function like new date()

Post a Comment