[CLOSED] Date Picker show special date

I want to add a date picker that can access remote data. And show some highlight for special date according to the remote data.
And I want to add some event listener on date picker, like show detail info for the special date when mouse over on that date.
Is it possible to do with datepicker? Can you provide some code sample?
I find CalendarPanel may suitable with this situation, but it to complex in presentation and even in coding. I just want a simple and small calendar.

Hi @trePjt,

I think it might be possible with a DatePicker, but I am not 100% sure. Anyway, we have no such an example.

Let's go further step by step. It is better to start a new forum thread for each step.

The first one we can discuss in the current thread.

Quote:

---

I want to add a date picker that can access remote data.

---

Please elaborate on that. What exactly do you mean by that?

hi Daniil,

Actually I will prepare a Dataset/Datatable. One of the column is datetime. I want to bind this Dataset/Datatable to the datepicker then have some further effect base on the datasource.

I think you can attach that data to a DatePicker via its CustomConfig.

Or, maybe, you could bind the data to a Store. Then read from that Store and put in a DatePicker when needed.

Quote:

---

Or, maybe, you could bind the data to a Store. Then read from that Store and put in a DatePicker when needed.

---

I prefer the second solution, as the dataset already bind to a gridpanel. I can reuse it.

Can you provide some code example? Thank you!

Well, I meant something like this:

Code:

---

var specialDates = [];

store.each(function(record) {
    specialDates.push(record.data.specialDateField);
});

datePicker.specialDates = specialDates;

---

You could listen to a Store's Load event to apply this action.
http://docs.sencha.com/extjs/4.2.1/#...ore-event-load

I have added the special date, but seems no different in the date picker.
The alert of the SpecialDate function can show the correct result.

Code:

---

        var SpecialDate = function(){
            var specialDates = [];
            var datePicker = #{testDP};
            var store = #{Store1};
            var a ='1';
            store.each(function(record) {
            a =a+ record.data.VSPDATETO;
                specialDates.push(new Date(record.data.VSPDATETO));
            });
            datePicker.specialDates = specialDates;
Ext.Msg.alert('result', specialDates);
            };
....
                        <ext:Store runat="server" ID="Store1" AutoLoad="true">
                            <Listeners>
                                <Load Fn="SpecialDate" />
                            </Listeners>
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="VSPVSPNO" Mapping="VSPVSPNO"/>
                                        <ext:ModelField Name="VSPDATEFR" Mapping="VSPDATEFR" Type="Date"/>
                                        <ext:ModelField Name="VSPDATETO" Mapping="VSPDATETO" Type="Date"/>
                                        <ext:ModelField Name="VSPPLANER" Mapping="VSPPLANER"/>
                                        <ext:ModelField Name="VSPJOURNEY" Mapping="VSPJOURNEY" />
                                        <ext:ModelField Name="VSPPURPOSE" Mapping="VSPPURPOSE"/>
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>

---

We are are discussing this:

Quote:

---

I want to add a date picker that can access remote data.

---

Not how to highlight these dates in a DatePicker.

As for highlighting here is an example:
http://forums.ext.net/showthread.php...ll=1#post73480

Thank you Daniil. You can mark this thread as close.
I will create topic for further issue later.