Web development tutorial

Tutorial created by Rune Brynestad, Totalweb AS

Categories: Data Bridge, Dreamweaver, Javascript

3 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

Step by step tutorial regarding datepicker basic modifications.

next section

Don't want past dates selectable?

you will need to edit the date picker javascript code.

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

you will need to add minDate: '+0'

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		minDate: '+0',
		onClose: closeDatePicker_datepicker_1
	});
});

next section

Datapicker Start on Monday

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

you will need to add firstDay: 1

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		firstDay: 1,
		onClose: closeDatePicker_datepicker_1
	});
});

next section

Show week number column

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

you will need to add showWeek: true

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		showWeek: true,
		onClose: closeDatePicker_datepicker_1
	});
});

next section

Show multiple number of months

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

you will need to add numberOfMonths: [2, 3]

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		numberOfMonths: [2, 3],
		onClose: closeDatePicker_datepicker_1
	});
});

This would show 6 months in 2 rows and 3 columns

next section

Change datepicker language

English / Western formatting is the default. You will need to edit the date picker javascript code and add code that replace the default values

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		onClose: closeDatePicker_datepicker_1
	});
});

you would need to manually add values in your own language for
prevText:
nextText:
monthNames:
dayNamesMin:
weekHeader:

Here's how it's works in Norwegian

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		prevText: 'Forrige',
		nextText: 'Neste',
		monthNames: ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],
		dayNamesMin: ['Sø','Ma','Ti','On','To','Fr','Lø'],
		weekHeader: 'Uke',
		onClose: closeDatePicker_datepicker_1
	});
});

next section

Display inline

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

change

<input id="datepicker_1" name="datepicker_1" type="text" />

To

<div id="datepicker_1"></div>

Restrict date range

Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.

the code may look like:

$(function(){
	$('#datepicker_1').datepicker({
		dateFormat: 'mm/dd/yy',
		showAnim: 'show',
		minDate: '-20',
		maxDate: '+1M +10D'
		onClose: closeDatePicker_datepicker_1
	});
});

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

3 ratings | Sign in to rate this tutorial

this_is_me: 12 Years, 3 Months, 4 Weeks, 10 Hours, 47 Minutes ago

Great and very helpful explanations about this complicated thing. Thanks a lot!
I would love to see some tutorials with European date formats - ther are some issues still. Like dd.mm.yy

Jolter: 11 Years, 1 Week, 5 Days, 11 Hours, 41 Minutes ago

Thanks - very useful

Datepicker basic modifications

Build websites with a little help from your friends

Build websites from already-built web applications

Want your website pre-built and hosted?

Everything else!

U.S. 858.201.4911 | International +1.858.201.4911

We've earned your trust.

Connect with us.