Forum | Appery.io

I have placed a datepicker on my page and I'd like to add the following JavaScript properties to it. However, when I create an OnClick Event and execute the JavaScript, it does not work. Please refer to screenshot....it creates another calendar (the second one) and adds the color dates to that one. Why does it create the first calendar? How can I fix this.

pre
var redDates = ['8/27/2014', '8/28/2014', '8/29/2014', '8/31/2014', '8/30/2014'];
var greenDates = ['8/15/2014', '8/16/2014', '8/17/2014'];

$('div[dsid="mydatepicker"]').datepicker({
//numberOfMonths: 2,
selectMultiple: true,
beforeShowDay: function(date) {
var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
return [true, ($.inArray(theday, redDates) = 0 ? "specialDate2" : ($.inArray(theday, greenDates) = 0 ? "specialDate1" : ""))];
},

 onSelect: function(date) { 
     date = new Date(date); 
     var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear(); 

     if ($.inArray(theday, greenDates) = 0) { 
         greenDate = theday; 
     } 
     $('div[dsid="mydatepicker"]').datepicker("refresh"); 
 } 

});
/pre

Hi Deki,

You create a new datepicker. Please try changing settings of existing datepicker instead.
preApperyio("mobiledatepickerName").datepicker_dataPickerOptions.beforeShowDay = function(date) {
//.........
}
Apperyio("mobiledatepickerName").datepicker_dataPickerOptions.onSelect = function(date) {
//.........
}/pre

Thanks Katya.
One more question. How can I disable the actual date picking. I just want to display a readonly calendar. I tried this but it doesn't work.

pre
Apperyio("datepicker_old").attr( { readonly: "readonly" } );
/pre

Hi Deki,

Unfortunately datepicker component doesn't have such property. Please find a list of datepicker properties here: http://api.jqueryui.com/datepicker/

Hi Team,
can you help me about this?
how deki shows that color? i need this date picker too. i hope anyone can help me here

Thank you

Hi Team,
i followed Yuri's in this link:
https://getsatisfaction.com/apperyio/...

now there are some problems and i hope you can help me out here:

1. missing image but i already stored the image in
   web_resources views assets images: screenshot is in below:

   ---Missing arrow Screenshot:

   ---proof that the imagse is already uploaded:
   

2. when the app is shows the color is not showing:
   
   -----i need to click the button in the date picker and back to the specific month before the color will show.
   i used the ff. code in pageshow event.:
   code$('div[dsid="yourDatePickerContainer"]').datepicker({
   beforeShowDay: colorize
   });
   var blueDates = ['4-5-2015', '4-14-2015', '4-21-2015'];
   var greenDates = ['4-15-2015', '4-22-2015'];
   var redDates = ['4-9-2015', '4-13-2015'];
   function colorize(date) {
   mdy = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
   console.log(mdy);
   if ($.inArray(mdy, blueDates) > -1) {
   return [true, "blue"];
   } else if ($.inArray(mdy, greenDates) > -1) {
   return [true, "green"];
   } else if ($.inArray(mdy, redDates) > -1) {
   return [true, "red"];
   } else {
   return [true, ""];
   }
   }
   /code

   Thank you in advance

Number 2 issue is solved, i need help in number 1 issue.

any updates here

Hello She,

We are very sorry for delay, we are working on it at the moment.

Hi Evgene,
Thank you for replying i will wait.

Thanks,
She