Widgets - Calendar

Instructions

Compare the functionality of a ExtJS date-picker over the standard Apex date-picker.

The ExtJS date-picker also supports partial dates and alternate date entry format masks.
Try entering 1 or 1/1 or 1-JAN then the TAB key and see the result.

Select a value

Apex Date Picker

Javascript Date

Page Comments

Author

Comment

test

Partha

If I use this javascript date-picker in a manual tabular form, then client-side add-rows functionality does not enable this javascript. I tried calling makeDateFields() after the row inserts, still, the javascript is not enabled. Any ideas ?

Test

Bhavesh

Hi Mark,
I am trying to get a date picker which shows monday as the first day. The default apex date picker shows sunday as first day. But I can see on your example here, the default apex date picker has monday as first day.

Is there a way I can also make my default apex date picker to show monday as first day.

Thanks,
BHavesh

Mark Lancaster

Re: the date-field erroring

The extjs.com guys introduced and error in the 2.1 release.
They have fixed the bug in the SVN repository, so people with a support subscription can download the latest source, containing the fix.

The forums also show which lines to fix, if you don't have a support subscription.

I'm linking directly to the extjs.com site for the javascript libraries - so until the "current" release is patched, I'll have to live with the bug.

max

very good

dvenus

When I tried it generated an error that said the date was in the wrong format. Also turned the box red.

Mark Lancaster

I've blogged details on Implementing Ext Dates in Oracle Apex.

Must have been in a cranky mood when I wrote it :)

need help

Can anybody explain me in detail, how to build the date picker in apex?

Source Code

<script type="text/javascript">
// convert inputs with class "date-picker" to date fields
function makeDateFields(){
  var els=Ext.select("input.date-picker",true);
  els.each(function(el){
    var df = new Ext.form.DateField({"format":'d-M-Y',"altFormats":'j|j/n|j/n/y|j/n/Y|j-M|j-M-y|j-M-Y'});
    df.applyToMarkup(el);
  })
}
    
Ext.onReady(function() {
  makeDateFields();
});
</script>

Property	Value
Rows Displayed