Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

**sanjshah** · 6 Apr 2008, 11:54 AM

Hi,

Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>tyu</title>

</head>

<head>

<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/ext-all.css"/>

<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/xtheme-gray.css" />

<script type="text/javascript" src="exttools/ext-2.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="exttools/ext-2.0/ext-all.js"></script>

<script type="text/javascript" src="exttools/ext-2.0/datepicker/ext.ux.datepickerplus-min.js"></script>

<link rel="stylesheet" type="text/css" href="stie.css" />

<link rel="stylesheet" type="text/css" href="exttools/ext-2.0/datepicker/datepickerplus.css" />

<script type="text/javascript">

Ext.onReady(function(){



Ext.BLANK_IMAGE_URL = 'exttools/ext-2.0/resources/images/default/s.gif';



    Ext.namespace('Ext.exampledata');



    taginfotext = '<p>Blah Blah Blah<br>Blah Blah Blah</p>';



    Ext.exampledata.equipment = [

            ['Equip1'],

            ['Equip2'],

            ['Equip3']

    ];

        

    Ext.exampledata.names = [

            ['Name1'],

            ['Name2'],

            ['Name3']

    ];

    

    Ext.exampledata.shopstores = [

            ['Shop1'],

            ['Shop2'],

            ['Shop3']

    ];



    Ext.exampledata.tagstore = [

            ['AAA:','Tage for A'],

            ['BBB:','Tage for B'],

            ['CCC:','Tage for C']

    ];

    

    var store = new Ext.data.SimpleStore({

        fields: ['type'],

        data : Ext.exampledata.equipment

    });

    

    var userstore = new Ext.data.SimpleStore({

        fields: ['username'],

        data : Ext.exampledata.names

    });

    

    var shopstore = new Ext.data.SimpleStore({

        fields: ['storename'],

        data : Ext.exampledata.shopstores

    });



    var tagstore = new Ext.data.SimpleStore({

        fields: ['tagprefix','itemdescription'],

        data : Ext.exampledata.tagstore

    });



    Ext.QuickTips.init();



    Ext.form.Field.prototype.msgTarget = 'side';



    // Asset Type

    var purchasedate = new Ext.form.DateField({

        width: 230,

        fieldLabel: 'Date Of Purchase',

        readOnly: true,

        format : 'd/m/Y',

        applyTo: 'purchaseddate'

    });

    

    var createdby = new Ext.form.TextField({

        width: 230,

        readOnly: true,

        applyTo: 'createdby'

    });

    

    var invoiceno = new Ext.form.TextField({

        width: 230,

        applyTo: 'invoiceno'

    });

    

    var cost = new Ext.form.NumberField({

        width: 230,

        applyTo: 'cost',

        emptyText : '0.00'

    });

    

    var assettype = new Ext.form.ComboBox({

        width: 230,

        store: store,

        displayField:'type',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        emptyText:'Select Equipment Type...',

        applyTo: 'assettype'

    });

    

    var shopstores = new Ext.form.ComboBox({

        width: 230,

        store: shopstore,

        displayField:'storename',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        emptyText:'Select store',

        applyTo: 'purchasedfrom'

    });

    

    

    //Asset Location

    var comboWithTooltip = new Ext.form.ComboBox({

        width: 230,

        store: userstore,

        displayField:'username',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        emptyText:'Select a User...',

        selectOnFocus:true,

        applyTo: 'allocation'

    });

    

    var dateissued = new Ext.form.DateField({

        width: 230,

        fieldLabel: 'Date Of Purchase',

        readOnly: true,

        format : 'd/m/Y',

        applyTo: 'dateissued'

    });





    //Comments

    var comments = new Ext.form.HtmlEditor({

        width: 600,

        applyTo: 'comments'

    });



     var holidaydatetest =  new Ext.ux.form.DateFieldPlus({

        usePickerPlus: true, //this will fire the use of datepickerplus instead of datepicker

        noOfMonth: 1,

        multiSelection: false,

        markNationalHolidays: true,

        useQuickTips:true,

        format : 'd/m/Y',

        tooltip:'do something',

          disabledDays: [0, 6], //0 = Sundays 6 = Saturdays

          disabledDaysText: 'Deliveries are not available on the weekends',

        disabledDates:['10/04/2008', '11/04/2008'],

        disabledDatesText :'this is not valid date',

        applyTo: 'holidaydatetest',

        listeners:{'onSelect':function(){var mydate = this.value; Ext.MessageBox.alert(mydate); }}        

    });



    //Tag Info Area

    var tagfield = new Ext.form.ComboBox({

        tpl: '<tpl for="."><div ext:qtip="{tagprefix}. {itemdescription}" class="x-combo-list-item">{tagprefix}</div></tpl>',

        width: 230,

        fieldLabel: 'Create Tag for Asset',

        store: tagstore,

        displayField:'tagprefix',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        emptyText:'Select Tag...',

        selectOnFocus:true,

        applyTo: 'itemtag'

    });



    var p = new Ext.Panel({

        title: 'Tag Details',

        hideCollapseTool: true,

        titleCollapse: true,

        collapsible: true,

        renderTo: 'taginfo',

        width:600,

        html: taginfotext

    });



});

</script>

</head>

<body>

<table width="600" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><form action="" method="post" name="form1" id="form1">

  <fieldset class="x-fieldset">

  <legend>Asset Type</legend>

  <table width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <td width="300" height="25" class="x-btn">Created By:</td>

      <td class="x-btn">Date of Purchase:</td>

    </tr>

    <tr>

      <td height="25"><input name="createdby" type="text" id="createdby" value="" /></td>

      <td><input type="text" name="purchaseddate" id="purchaseddate" /></td>

    </tr>

    <tr>

      <td height="25" class="x-btn">Invoice No:</td>

      <td class="x-btn">Purchased From:</td>

    </tr>

    <tr>

      <td height="25"><input type="text" name="invoiceno" id="invoiceno" /></td>

      <td><input type="text" name="purchasedfrom" id="purchasedfrom" /></td>

    </tr>

    <tr>

      <td height="25" class="x-btn">Asset Type:</td>

      <td class="x-btn">Cost:</td>

    </tr>

    <tr>

      <td height="25"><input type="text" name="assettype" id="assettype" /></td>

      <td><input type="text" name="cost" id="cost" /></td>

    </tr>

  </table>

  <p>&nbsp;</p>  </fieldset>

  <fieldset class="x-fieldset">

  <legend>Allocation Details</legend>

  <table width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <td width="300" height="25" class="x-btn">Allocated Name:</td>

      <td class="x-btn">Date Issued:</td>

    </tr>

    <tr>

      <td height="25"><input type="text" name="allocation" id="allocation" /></td>

      <td><input type="text" name="dateissued" id="dateissued" /></td>

    </tr>

    <tr>

      <td height="25"><span class="x-btn">Condition:</span></td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td height="25"><span class="x-btn"><input name="condition" type="radio" id="radio" value="New" checked="checked" />New

<input type="radio" name="condition" id="radio2" value="Second Hand" />Second Hand

<input type="radio" name="condition" id="radio3" value="N/A" />N/A</span></td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td height="25"><span class="x-btn">Date Issued:</span></td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td height="25"><input type="text" name="holidaydatetest" id="holidaydatetest" /></td>

      <td>&nbsp;</td>

    </tr>

  </table>

  <p>&nbsp; </p>

  </fieldset>

  </p>

  <fieldset class="x-fieldset">

  <legend>Comments</legend>

  <textarea name="comments" id="comments" cols="45" rows="5"></textarea>

  </fieldset>

  <fieldset class="x-fieldset">

  <legend>Tags</legend>

  <div id="taginfo"></div>

  <br />

  <br />

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

  </fieldset>

</form>

<p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>



    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p></td>

  </tr>

</table>

<p>&nbsp;</p>

<p>&nbsp;</p>



<p>&nbsp;</p>

</body>

</html>

Any help is appreciated.

Regards,

Sanj

**wm003** · 6 Apr 2008, 12:26 PM

Originally Posted by sanjshah

Hi,

Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.

...
Any help is appreciated.

MMh, i guess you still use Ext 2.0 ("exttools/ext-2.0/resources/" seems very suspicious, because the 2.0.2 release should look like "exttools/ext-2.0.2/resources/" by default)? I've tested your code with Ext 2.0.2 and i get no error. Everything works fine. Please upgrade to 2.0.2 and it should work.

DatePickerPlus extends Datepicker, so there might be an old Bug in the original Code (that has been fixed in 2.0.2) that prevent it to be working with DatepickerPlus.

**sanjshah** · 6 Apr 2008, 2:35 PM

Thanks Marco,

Updated to the latest Extjs and all working perfectly so thanks

Also I like they way to hide 'Today' button much cleaner!

Regards,

Sanj

**Spirit** · 6 Apr 2008, 11:11 PM

Looks real nice!

I have tested your demo site and I found something which may not be workin as expected (IE & FF):

If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)

Works well if selection is within one month.

Greetz
Spirit

**jerrybrown5** · 6 Apr 2008, 11:50 PM

This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea

Best regards,
Jerry Brown

**wm003** · 7 Apr 2008, 1:08 AM

Originally Posted by Spirit

I have tested your demo site and I found something which may not be workin as expected (IE & FF):

If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)
Works well if selection is within one month.

Oups...

Thanks for reporting. I fixed this and updated the demopage and first Post
I also added a new Method "setDateLimit()" to be able to set minDate and maxDate at once

**wm003** · 7 Apr 2008, 1:17 AM

Originally Posted by jerrybrown5

This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea

Yes, i thought about this myself and i think it should run faster. It's on my Roadmap for a 1.x Version (or Ext Dev Team comes up with this on the original Datepicker that i can extend)
Building up each calendar as a div and floating them by CSS shoud only make it necessary to update one month instead of all of them by just repositioning the next month to be shown...
Personally i needed the datepicker in function like i did with datepickerplus now asap, so building it up by tables was faster (codingwise). But i agree there should be more potential in gaining more performance

**Richie1985** · 7 Apr 2008, 11:28 PM

how can i use the 'afterdateclick' method?

not so:

PHP Code:


listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} ,

how then????

thanks

**wm003** · 8 Apr 2008, 12:21 AM

Originally Posted by Richie1985

how can i use the 'afterdateclick' method?

not so:

PHP Code:


listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} ,

how then????

thanks

"afterdateclick" works only if "multiSelection" is set to true. otherwise use the "select"-event (that was the only event from the original datepicker, so to be backward compatible the afterdateclick works only on multiSelection.

i tested your code and it works as expected

**Richie1985** · 8 Apr 2008, 1:19 AM

mhh but the select event dosnt work

PHP Code:


    var datum_supervisor =  new Ext.ux.form.DateFieldPlus({

        allowBlank:false,

        readOnly:true,

        showWeekNumber: true,

        format: 'd.m.Y',

        value: dt.format('d.m.Y'),

        noOfMonth : 1,

        noOfMonthPerRow : 1,

        useQuickTips:false,

        listeners:{'select':function(){ Ext.MessageBox.alert('test'); }}

    });

i had to call a function, when the user select a date in the datepicker.

Thread: Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

Thread Tools

Search Thread

Display

Bug report

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News