close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Datepicker basic modifications

Tutorial created by Rune Brynestad, Totalweb AS

Categories: Data Bridge, Dreamweaver, Javascript

rating

Step by step tutorial regarding datepicker basic modifications.

arrow downDon'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
});
});

arrow downDatapicker 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
});
});

arrow downShow 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
});
});

arrow downShow 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

arrow downChange 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
});
});

arrow downDisplay 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>

arrow downRestrict 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
});
});

arrow downReviews 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
rating
rating

this_is_me: 10 Years, 8 Months, 3 Weeks, 3 Hours 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

rating

Jolter: 9 Years, 5 Months, 5 Days, 3 Hours, 54 Minutes ago

Thanks - very useful

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.