PDA

View Full Version : [CLOSED] Date Picker show special date



trePjt
Dec 02, 2013, 3:43 AM
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.

Daniil
Dec 02, 2013, 6:01 AM
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.

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


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

trePjt
Dec 03, 2013, 7:15 AM
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.

Daniil
Dec 03, 2013, 12:07 PM
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.

trePjt
Dec 04, 2013, 1:18 AM
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!

Daniil
Dec 04, 2013, 7:04 AM
Well, I meant something like this:

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/#!/api/Ext.data.AbstractStore-event-load

trePjt
Dec 05, 2013, 1:40 AM
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.



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>

Daniil
Dec 05, 2013, 3:48 AM
We are are discussing this:

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?17110&p=73480&viewfull=1#post73480

trePjt
Dec 06, 2013, 1:12 AM
Thank you Daniil. You can mark this thread as close.
I will create topic for further issue later.