Is there a simple way to create a date picker?

[Julio Serrano]

I know there is a JQuery.UI feature to do that, but I'd like to avoid WebView controls on this app.

Any help will be appreciated.

[Julio Serrano]

As nobody answered, I did on my way. This is the code.

/******************************************************************************
 * DatePicker
 * ============================================================================
 * Author: Julio Cesar Serrano Ortuno
 * Creation date: November, 22 of 2014
 * Last update: November, 23 of 2014
 * ============================================================================
 * Simple date picker for DroidScript
 * ****************************************************************************/
 
Date.prototype.daysInMonth = function () {
   return new Date(this.getFullYear(), this.getMonth()+1, 0).getDate();
}


/*** DatePicker class ***/
function DatePicker() {
    this.text = {}; //Recipient for result date
    this.month = 0; //Date
    this.year = 0;
    this.day = 0;
    this.init = DatePicker_init;
    this.getDatePicker = DatePicker_get;
    this.fill = DatePicker_fill;
    this.createDialog = DatePicker_createDialog;
     
    this.init();
}


/*** Creates the date picker dialog ***/
function DatePicker_init() {
    this.dlg = this.createDialog();
}


/*** Shows the date picker ***/
// Receives a date and a Text object which is going to receive the selected date
function DatePicker_get(d, textobj) {
   
    this.month = d.getMonth();
    this.year = d.getFullYear();
    this.day = d.getDate();
   


    this.text = textobj;
   
    this.fill();
   
    this.dlg.Show();
}


/*** Fills the date picker dialog ***/
//Fills the dialog from the date provided on get method
function DatePicker_fill() {
    // This can be adapted to your locale
    var months = ["Enero","Febrero","Marzo","Abril","Mayo","Junio",
                  "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];






    // Hides the days layout
    this.callay.SetVisibility("Hide");
   
    //Get layout objects
    var lo = this.layObjects;
   
    //Sets the month and the year
    lo.tmonthyear.SetText(""+months[this.month]+" "+this.year);
   
    //Get the first day of the month
    var firstday = new Date();
    firstday.setDate(1);
    firstday.setMonth(this.month);
    firstday.setFullYear(this.year);
   
    //Get the number of cells we have to pass to start putting the day numbers
    //Y start the week on monday, so the adjustment I make
    var dow = firstday.getDay()-2;
    if (dow == -2) dow = 5;
   
    //Erase all days
    lo.cells.forEach(function (item) {
        item.SetText("");
        item.SetBackColor("#00ffffff");
    });
   
    //Set the days of this month
    for (var i = 1; i <= firstday.daysInMonth(); i++) {
        lo.cells[i+dow].SetText(""+i);


        if (i == this.day) {
            //Current established day gets remarked
            lo.cells[i+dow].SetBackColor("#ff00ACE0");
        } else {
            lo.cells[i+dow].SetBackColor("#ff555555");
        }
    }
    //Shows the day numbers layout
    this.callay.SetVisibility("Show");
}


/*** Creates the dialog ***/
function DatePicker_createDialog() {
    var lo = {};    //Layout objects that are to be modified from other methods
                    //are stored in this.layObjects.
                    //"lo" will be stored there later on this very method.
    var dlg = app.CreateDialog("Seleccionar Fecha");
    dlg.Hide();
   
    var lay = app.CreateLayout("Linear", "VCenter,FillXY");
    lay.SetBackColor("#ffffffff");
    dlg.AddLayout(lay);
   
    var lmonth = app.CreateLayout("Linear", "Horizontal,FillX");
    lmonth.SetMargins(0,0.02,0,0.02);
    lay.AddChild(lmonth);
   
    var prev = app.CreateImage("Img/prev.png",0.1,0.06);
    prev.datepicker = this;
    prev.SetOnTouchUp( prevHandler );
    lmonth.AddChild(prev);
    lo.tmonthyear = app.CreateText("Noviembre 2014",0.52,0.09,"Center");
    lo.tmonthyear.SetTextSize(16);
    lo.tmonthyear.SetPadding(0,0.014,0,0);
    lmonth.AddChild(lo.tmonthyear);
    var next = app.CreateImage("Img/next.png",0.1,0.06);
    next.datepicker = this;
    next.SetOnTouchUp( nextHandler );
    lmonth.AddChild(next);
   
    var lweek = app.CreateLayout("Linear","Horizontal, FillX");
    lay.AddChild(lweek);
   
    var lun = app.CreateText("L",0.1,0.06,"Center");
    lun.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(lun);
    var mar = app.CreateText("M",0.1,0.06,"Center");
    mar.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(mar);
    var mie = app.CreateText("X",0.1,0.06,"Center");
    mie.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(mie);
    var jue = app.CreateText("J",0.1,0.06,"Center");
    jue.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(jue);
    var vie = app.CreateText("V",0.1,0.06,"Center");
    vie.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(vie);
    var sab = app.CreateText("S",0.1,0.06,"Center");
    sab.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(sab);
    var dom = app.CreateText("D",0.1,0.06,"Center");
    dom.SetMargins(0.004,0,0.004,0);
    lweek.AddChild(dom);
   
    this.callay = app.CreateLayout("Linear","VCenter,FillXY");
    lay.AddChild(this.callay);
    lo.cells = [];
    for (var i = 0; i < 6; i++) {
        var linelay = app.CreateLayout("Linear","Horizontal,FillX");
        this.callay.AddChild(linelay);
        for (var j = 0; j < 7; j++) {
            var cell = app.CreateText("31",0.1,0.06);
            cell.SetTextColor("#ffffffff");
            cell.SetMargins(0.004,0.004,0.004,0.004);
            cell.SetPadding(0,0.015,0,0);
            cell.datepicker = this;
            cell.SetOnTouchUp( dayHandler );
            linelay.AddChild(cell);
            lo.cells.push(cell);
        }
    }
   
    this.layObjects = lo;
    return dlg;
}


/*** Event handlers ***/


/*** Goes to the previous month ***/
function prevHandler() {
    if (this.datepicker.month == 0) {
        this.datepicker.month = 11;
        this.datepicker.year--;
    } else {
        this.datepicker.month--;
    }
    this.datepicker.fill();
}


/*** Goes to the next month ***/
function nextHandler() {
    if (this.datepicker.month == 11) {
        this.datepicker.month = 0;
        this.datepicker.year++;
    } else {
        this.datepicker.month++;
    }
    this.datepicker.fill();
}


/*** Handles when the user clicks on a day ***/
function dayHandler() {
    var t = this.GetText().trim();
    if (t.length == 0) return;
   
    var n = parseInt(t);
   
   
    var str = n+"/"+(this.datepicker.month+1)+"/"+this.datepicker.year;
    this.datepicker.text.SetText(str);
    this.datepicker.dlg.Hide();
}

You can adapt it to your location and use it this way:

var datepicker = new DatePicker();
datepicker.getDatePicker(new Date(Date.now()),txtRecipient);

You can use any date you want and txtRecipient has to be an object with SetText and GetText methods.

You may copy this code to your project, but I recommend putting it on a separated script and load it via

app.LoadScript or other way you fancy.

You may find it kinda slow, if somebody has an idea to make it faster, let me know please.

If you make some other improvements, also let me know.

Any ideas will be welcomed.

[salvatore fusto]

Julio,

i copied the script in a pickAdate.js file in the root app, then i tested it with this simple script:

function OnStart()

{

    lay = app.CreateLayout( "linear", "VCenter,FillXY" );

    txt = app.CreateTextEdit( "",0.8,-1 );

    txt.SetBackColor("#cccccc") //only to see it

    lay.AddChild( txt );

    app.AddLayout( lay );

    app.LoadScript("pickAdate.js",showDP)

}

function showDP(){

    var datepicker = new DatePicker();

    datepicker.getDatePicker(new Date(Date.now()),txt);

}

but i obtain a normal textedit control, gwting the keyboard on touching on.

what have i misundestood?

thanks and regards

Salvatore

[Julio Serrano]

Try with a createText and use SetOnTouchUp to triger the date picker.
Also load the criptografía synchronously with this code

//------------------------------------------------------------------------------
// LoadLocalScript synchronously(!) loads (and runs) the given script file
//------------------------------------------------------------------------------

app.LoadLocalScript = function LoadLocalScript (ScriptFileSpec) {
if (ScriptFileSpec.charAt[0] !== '/') {
ScriptFileSpec = app.GetAppPath() + ScriptFileSpec;
};

var ScriptSource = app.ReadFile(ScriptFileSpec);
var ScriptElement = document.createElement('script');
ScriptElement.type = 'application/javascript';
ScriptElement.text = ScriptSource;
ScriptElement.defer = true;
document.getElementsByTagName('head')[0].appendChild(ScriptElement);
};

[salvatore fusto]

So i tried this:

//Called when application is started.

function OnStart()

{

    app.LoadScript("pickAdate.js",goDP)

    

}

function goDP(){

lay = app.CreateLayout( "linear", "VCenter,FillXY" );

txt = app.CreateText( "",0.8,0.2 );

txt.SetBackColor("#cccccc")

txt.SetOnTouchUp(showDP);

lay.AddChild( txt );

app.AddLayout( lay );

}

function showDP(){

    var datepicker = new DatePicker();

    datepicker.getDatePicker(new Date(Date.now()),txt);

}

with no luck! the showDP is regularly triggered but no datePicker appears.

can i solve?

tjanks and regards

Salvatore

[salvatore fusto]

i made a simple test, adding 2 alerts in showDP:

function showDP(){

    app.Alert("DROID before")

    var datepicker = new DatePicker();

    app.Alert("DROID after")

    datepicker.getDatePicker(new Date(Date.now()),txt);

}

the first alert is triggered, the second is not: it seems that the script is not (correctly) loaded, but i used a callback to design the layout after script is loaded, in a manner i already used a lot of time.

thanks and regards

Salvatore

[salvatore fusto]

solved: only lack of the 2 icons prev and next!!

thanks

salvatore

[Julio Serrano]

I'm sorry, I was about to tell you that.

I use the ones I attach to this message.

[salvatore fusto]

Thanks Julio, fine icons.

About performance, i think the problem is the rendering of the calendar, made by 2 for loops, one inside the other: may be trying to use only one loop, get better performance.

instead of

for (7 days){

   for (6 rows){}

}

you could try only one loop for(42 times), or you can write 42 plain function call, 1 for  each day btn: it is well known that loop spent more time that the innser instructions to execute.

thanks and regards

salvatore

[Julio Serrano]

I'll try. I think that creating text controls is slow also.

But what should I do with that?

[Steve Garman]

I suspect getting rid of the text controls would be a much more effective optimisation than changing the loops.

I don't know how slow your picker is.

Would it be worth the effort of doing all your display in an image and using the x y coordinates to work out which date the user has chosen?

[Julio Serrano]

The problem I find is how to calculate the sizes to fit any screen.

Using relative sizes works for controls, but I am unsure of how to do it with an image and painting.

[Steve Garman]

Now you remind me, I tried to create a database-display grid using an image control and gave up.

There was some minor discussion of the problem at https://groups.google.com/forum/m/#!topic/androidscript/mE3y1zKJQBo

[Julio Serrano]

Someway I did. Here's the code for my DatePicker, improved with an image.

As the samples show, images use the same relative coordinates that we use with the rest of the controls.

The problem is that if you change the image size, Everything on the image will addapt to keep the same

proportions.

I also added touch events management. Took a little time, but now I think it may be a good example to help others to better understand it.

You can swipe to move between months and click to select a date.

/******************************************************************************

 * DatePicker

 * ============================================================================

 * Author: Julio Cesar Serrano Ortuno

 * Creation date: November, 22 of 2014

 * Last update: November, 26 of 2014

 * ============================================================================

 * Simple date picker for DroidScript

 * ****************************************************************************/

 

Date.prototype.daysInMonth = function () {

   return new Date(this.getFullYear(), this.getMonth()+1, 0).getDate();

}

var lastev=[]; lastev.action="Up"; lastev.x=0; lastev.y=0;

/*** DatePicker class ***/

function DatePicker() {

    DPTHIS = this;

    

    this.text = {}; //Recipient for result date

    this.month = 0; //Date

    this.year = 0;

    this.day = 0;

    this.init = DatePicker_init;

    this.getDatePicker = DatePicker_get;

    this.fill = DatePicker_fill;

    this.createDialog = DatePicker_createDialog;

    this.getDateRect = DatePicker_getDateRect;

    this.getDateFromCoords = DatePicker_getDateFromCoords;

    //Paint the calendar and gets an array with date rects for helping

    //Click detection later.

    this.calimg.SetColor("#ffffffff");

    var rects = [];

    for (var i = 1; i <= firstday.daysInMonth(); i++) {

        var rect = this.getDateRect(i,dow);

        this.calimg.SetPaintColor("#ff555555");

        this.calimg.DrawRectangle(rect.x,rect.y,rect.tx,rect.ty);

        this.calimg.SetPaintColor("#ffffffff");

        this.calimg.SetTextSize(16);

        this.calimg.DrawText(lpad(""+i,2),rect.x+0.03,rect.y+0.1);

        rects[i-1] = rect;

    }

    this.rects = rects;

    this.calimg = app.CreateImage(null,0.756,0.475);

    this.calimg.SetOnTouch( calimg_OnTouch );

    this.callay.AddChild(this.calimg);

    

    this.layObjects = lo;

    return dlg;

}

/*** Given a date returns a DateRect for representation purposes ***/

function DatePicker_getDateRect(day, dow) {

    var r = new DateRect(0,0);

    var padding = r.padding;

    var width = r.width, height = r.height;

    

    var target = day+dow;

    var row = Math.floor(target / 7);

    var col = Math.floor(target % 7);

    

    var x = padding+((padding*2)*col)+(width*col);

    var y = padding+((padding*2)*row)+(height*row);

    

    return new DateRect(x, y);

}

/*** Gets a date from given coordinates ***/

function DatePicker_getDateFromCoords(x, y) {

    var rects = this.rects;

    var date = -1;

    

    rects.some( function (rect, index) {

        if (rect.inside(x, y)) {

            date = index+1;

            return true;

        }

    });

    

    return date;

}

// Used for date representation coordinates storage

function DateRect(x,y) {

    this.padding = 0.0065

    this.x = x;

    this.y = y;

    this.width = 0.130;

    this.height = 0.14;

    this.tx = x+this.width;

    this.ty = y+this.height;

    

    this.inside = function (x, y) {

        return (x >= this.x && x <= this.tx &&

                y >= this.y && y <= this.ty);

    };

}

/*** Event handlers ***/

/*** Goes to the previous month ***/

function prevHandler() {

    if (this.datepicker.month == 0) {

        this.datepicker.month = 11;

        this.datepicker.year--;

    } else {

        this.datepicker.month--;

    }

    this.datepicker.fill();

}

/*** Goes to the next month ***/

function nextHandler() {

    if (this.datepicker.month == 11) {

        this.datepicker.month = 0;

        this.datepicker.year++;

    } else {

        this.datepicker.month++;

    }

    this.datepicker.fill();

}

var moves = [];

/*** Handles Multitouch over the calendar ***/

function calimg_OnTouch(ev) {

    

    //When the action was Move, we take account of all moves

    if (ev.action == "Move") {

        moves.push(ev.X);

    }

    

    // Handle user interaction

    // We wait until TouchUp

    if (ev.action == "Up") {

        

        if (lastev.action == "Down") {

            

            // In the rare case the user doesn't move

            // Get the signaled day and retrn

            

            var date = DPTHIS.getDateFromCoords(ev.X, ev.Y);

            

            if (date != -1) {

                var str = lpad(date,2)+"/"+lpad(DPTHIS.month+1,2)+"/"+DPTHIS.year;

                DPTHIS.text.SetText(str);

                DPTHIS.dlg.Hide();

                

            }

            

        } else if (lastev.action == "Move") {

            

            // Last event was move, so we have to analize the move

            

            app.ShowDebug("Move: "+moves[0]+" / "+moves[1]+":"+moves.length);

            

            if (Math.abs(moves[0]-moves[moves.length-1]) <= 0.1) {

                

                // Discard insignificant moves

                // And take like Down

                var date = DPTHIS.getDateFromCoords(ev.X, ev.Y);

                

                if (date != -1) {

                    var str = lpad(date,2)+"/"+lpad(DPTHIS.month+1,2)+"/"+DPTHIS.year;

                    DPTHIS.text.SetText(str);

                    DPTHIS.dlg.Hide();

                    

                }

                

            } else {

                

                // Handle the move

                if (moves[0] < moves[1]) {

                    

                    //To right

                    if (DPTHIS.month == 0) {

                        DPTHIS.month = 11;

                        DPTHIS.year--;

                    } else {

                        DPTHIS.month--;

                    }

                    DPTHIS.fill();

                    

                } else if (moves[0] > moves[1]) {

                    

                    //To left

                    if (DPTHIS.month == 11) {

                        DPTHIS.month = 0;

                        DPTHIS.year++;

                    } else {

                        DPTHIS.month++;

                    }

                    DPTHIS.fill();

                    

                }

            }

            

            // The move has been completed, so we init the moves array

            moves = [];

        }

    }

    

    // Get record of this event for later comparation

    if(ev.action != ""){

        lastev.action = ev.action

        lastev.x = ev.x[0];

        lastev.y = ev.y[0]

    }    

}

There's also a pic to see how it looks like. :)

If somebody wants to use it, remember you need back.png and next.png icons!

[Julio Serrano]

Sorry, you also may need this lpad small function:

//Fills with zeroes by left
function lpad(value, padding, c) {
    c = c || "0";
    var zeroes = new Array(padding+1).join(c);
    return (zeroes + value).slice(-padding);
}

[salvatore fusto]

Julio,

now DP is much faster, but it does mark today on the calendar,; also, i appreciate the swipe effect.

[Netpower8]

hi... i copied the sample but was aunable to have this running just a blank screen just like julio serrano describe.

is there a sample onstart() to to show how this is used? thanks in advance

[Julio Serrano]

It doesn't work as a standalone program.

You need to create your program (it can be just a button) and put this code on a secondary file. Then you

import it from your main file and then you can call it the following way:

var datepicker = new DatePicker();

datepicker.getDatePicker(new Date(Date.now()),txtRecipient);

txtRecipient is the textfield you want the date to be put.

[Netpower8]

ok... willl try it.. see if i can have this working thanks

[Steve Garman]

I've been using something like this in a personal project but I haven't tried it on multiple devices.

var html="<html><head><script src='file:///android_asset/app.js'></script></head>"+
"<script>function OnStart(){};function gotDate(){var x=document.getElementById('datep');app.Execute('choseDate('+JSON.stringify(x.value)+')');}</script>"+
'<body onload="app.Start()">Choose date <input id="datep" type="date" onChange=gotDate()></body></html>'

//Called when application is started.
function OnStart()
{

    var lay = app.CreateLayout( "linear", "FillXY" );    
    var web = app.CreateWebView();
    web.LoadHtml(html);
    lay.AddChild( web );     
    app.AddLayout( lay );
}

function choseDate(dat)
{
     var d=new Date(dat);
     var yyyy = d.getFullYear();
     var mm = d.getMonth()+1;
     var dd = d.getDate();
     var msg=yyyy+"\n"+mm+"\n"+dd
     app.ShowPopup(msg);
}

[Netpower8]

thanks steve... tried it works ok... but will study it when my program reach to that point that needs it... still working on other parts of it... thanks

[Netpower8]

tried your suggestion it works also... thanks... will look into the code after i finish the other parts of my program... thanks

[Mauritz Zondagh]

Hi,

I am trying to get this datapicker example to work, but gets a error on "this.init = DatePicker_init;"

Do i need any additional packages for this example?

Thanks

[Alex F]

Hm I wouldn't call it 'simple' juliano ^
Please post an js file shows how to use your dae picker - please dont post the code
First problem is copying the monster and
Second problem when paste it doubles line breaks...
Thanks :)

[Netpower8]

If you like droidscript and would like to show some appreciation to the VERY SMALL TEAM that make this app making possible. Buy a plugin. Buy the UIExtra plugin. If i'm not mistaken that plugin has the date and time picker. You dont need to make your own code. You just need to call the function/method and it will do all the needed stuff to display a date and time picker then return a value to your code.

And you whats the BEST PART?

Your small gesture of support will keep DroidScript alive. And that small team will continue to provide updates and bug fixes. And make what was a good tool that makes android app into THE BEST TOOL for app making.

Wait there's more....

AND YOU WILL BE PROUD THAT YOU HAVE CONTRIBUTED TO MAKE IT POSSIBLE.

[Mauritz Zondagh]

OK, i load the date picker script file now synchronously as specified in this group, and call it via setonTouch(".... but is still get a error on "this.init = DatePicker_init;" (line 25 of the second sample code in this topic)

(Not that i understand what is means to load the script synchronously vs app.LoadScript("DatePicker.js");)

This is my main js file

Enter code here...

//app.LoadScript("DatePicker.js",showDP);

app.LoadScript("DatePicker.js");

//Called when application is started.

function OnStart()

{

//Create a layout with objects vertically centered.

lay = app.CreateLayout( "linear", "VCenter,FillXY" );

//Create a text label and add it to layout.

txt = app.CreateText( "Enter Date" );

txt.SetTextSize( 32 );

txt.SetOnTouchUp(showDP);

lay.AddChild( txt );

//Add layout to app.

app.AddLayout( lay );

//------------------------------------------------------------------------------ 

// LoadLocalScript      synchronously(!) loads (and runs) the given script file 

//------------------------------------------------------------------------------ 

app.LoadLocalScript = function LoadLocalScript (ScriptFileSpec) { 

    if (ScriptFileSpec.charAt[0] !== '/') { 

      ScriptFileSpec = app.GetAppPath() + ScriptFileSpec; 

    }; 

    var ScriptSource  = app.ReadFile(ScriptFileSpec); 

    var ScriptElement = document.createElement('script'); 

      ScriptElement.type  = 'application/javascript'; 

      ScriptElement.text  = ScriptSource; 

      ScriptElement.defer = true; 

    document.getElementsByTagName('head')[0].appendChild(ScriptElement); 

  }; 

}

function showDP()

{

    var datepicker = new DatePicker();

    datepicker.getDatePicker(new Date(Date.now()),txt);

}

(The DatePicker.js file is attached)

Thanks

[Netpower8]

Plus the UIExtra has something extra also. You can make transparent apps. "Hey, Whats that?" you might say... Well it those floating icon apps you see on playstore. That icon you move around much like the famous facebook chat head. And you will say... "Wow... I have another great idea on what i can do with that."

;-)

[Steve Garman]

Nelson,
I would encourage anyone to buy the UIExtras plugin but I think it is incorrect to suggest it has anything to do with transparent apps or chat heads.

It does have floating action buttons but they are nothing like chat heads.

They are the sort of button you get to create a new email in the Gmail app on recent versions of Android.

If you want to create transparent apps, I think you need a Premium subscription.

They are useful to float over other apps it is true. I keep one of mine available all the time to call from a notification I leave in the tray.

[Steve Garman]

Since I've tried to describe part of the UIExtras plugin, perhaps I should link to a fuller description
https://groups.google.com/d/msg/androidscript/Qbf36sKFHV4/-AIp0kxNCQAJ

[Mauritz Zondagh]

Thank you for this link, the UIExtra's plugin can simplify many tasks!!

[Mauritz Zondagh]

Attached is a spk example of this Date Picker & main.js file to launch date picker, for newbies also struggling to get this example to work.

The originator of this data picker Julio Serrano helped to get this working, and gave permission that i can post this example.

As Steve replied, the GUI Extras plugin is the way to go, supporting the developers & you get more than just a date picker.