Date Picker 2

Note: I'll not recommend to use this date picker because a better alternative, datebox widget is available. Check here. This code can be used for reference and learning only.

This is updated version of the Date picker which I posted earlier (See Here)

In this date picker,, GUI has been created by scripts only.

Example demo:

Date Picker Demo

Usage Example Script:

To use this script in your application, assign an ID to the textbox where you want the date picker to pop. Also, create a handler with argument 'pickDate' and add it to the textbox. Also include the function createDatePicker(your application object).

You can change the Global parameters for date picker which are shown in red color.

function doGet() {
var app = UiApp.createApplication();
var panel = app.createVerticalPanel();
//Date Box must be having an ID, it can be anything
var dateBox1 = app.createTextBox().setText('Click here').setId('myDate1').setName('date1');
var dateBox2 = app.createTextBox().setText('Click here').setId('myDate2').setName('date2');

createDatePicker(app);//Include this function to create date Picker
//Create handler & add to date box to pick the date
var handler = app.createServerClickHandler('pickDate');//Handler function must be pickDate
dateBox1.addClickHandler(handler);
var handler2 = app.createServerClickHandler('pickDate');
dateBox2.addClickHandler(handler2);

panel.add(dateBox1);
panel.add(dateBox2)
app.add(panel);
return app;
}

//**********Date Picker code starts here
//Global Parameters for date Picker
numFutureYear = 6;//Change as per your requirement
numPastYear = 60;//Change as per your requirement
scriptTimeZone = 'GMT+5:30'//This time zone should be same as the script Timezone
//To know the Timezone of your script, Goto File->Properties->TimeZone in script editor
dateFormat = 'MM/dd/yyyy';//Change as per your requirement
monthArray = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
daysArray = ['S','M','T','W','T','F','S'];
today = new Date();

//########Do not change anything after this line
function createDatePicker(app){
    var datePanel = app.createVerticalPanel().setId('outerPanel')
      .setStyleAttribute('border','1px solid black')
      .setVisible(false).setStyleAttribute('backgroundColor','Bisque');
var monthListBox = app.createListBox().setId('monthListBox')
      .setStyleAttribute('backgroundColor','Bisque');
var yearListBox = app.createListBox().setId('yearListBox')
      .setStyleAttribute('backgroundColor','Bisque');
var hiddenBox = app.createTextBox().setVisible(false).setId('hiddenTB');
var dateGrid = app.createGrid(7,7);
for(var l = 0; l<7; l++){
    dateGrid.setWidget(0, l, app.createLabel(daysArray[l])
                       .setStyleAttribute('fontSize','8pt')
                      .setStyleAttribute('fontWeight','bold')
                      .setStyleAttribute('textAlign', 'center')
                      .setStyleAttribute('color','black')
                      .setWidth('17px'));
}
var dateId = 0;
for (var m = 1; m<7; m++){
    for(var n = 0; n<7; n++){
      dateGrid.setWidget(m, n, app.createLabel('xx').setId('dl'+dateId)
                         .setStyleAttribute('fontSize','8pt')
                        .setStyleAttribute('textAlign', 'center')
                        .setStyleAttribute('color','black'));
      dateId++;
    }
}
var listBoxGrid = app.createGrid(1,3);
listBoxGrid.setWidget(0,0,monthListBox).setWidget(0,1,yearListBox)
    .setWidget(0,2,app.createAnchor('?', 'https://sites.google.com/site/appsscripttutorial')
              .setStyleAttribute('fontWeight','bold').setStyleAttribute('color', 'black'));
datePanel.add(listBoxGrid).add(dateGrid).add(hiddenBox);
app.add(datePanel);
var monthListBox = app.getElementById('monthListBox').setName('monthListBox').setStyleAttribute('fontSize','8pt');
for (var i = 0; i< monthArray.length; i++) monthListBox.addItem(monthArray[i]);
monthListBox.setSelectedIndex(today.getMonth());
var yearListBox = app.getElementById('yearListBox').setName('yearListBox').setStyleAttribute('fontSize','8pt');
var startYear = today.getYear() - numPastYear;
for (var i = 0; i<= numPastYear+numFutureYear; i++){
yearListBox.addItem(startYear.toString());
    startYear++;}
yearListBox.setSelectedIndex(numPastYear);
var dateHandler = app.createServerChangeHandler('updatePicker');
dateHandler.addCallbackElement(app.getElementById('outerPanel'));
yearListBox.addChangeHandler(dateHandler);
monthListBox.addChangeHandler(dateHandler);
var currentYear = today.getYear();
var currentMonth = today.getMonth();
var numDaysInCurrentMonth = 32 - new Date(currentYear, currentMonth, 32).getDate();
var day1ofcurrentMonth = new Date(currentYear, currentMonth, 1).getDay();
for(var i = 0; i < 42; i++){
    var dlId = 'dl'+i;
    if(i < day1ofcurrentMonth || i >= day1ofcurrentMonth+numDaysInCurrentMonth)
      app.getElementById(dlId).setVisible(false);
    else
      app.getElementById(dlId).setText((i-day1ofcurrentMonth+1).toString()).setVisible(true);
}
var dateSelectHandler = app.createServerClickHandler('selectDate');
dateSelectHandler.addCallbackElement(app.getElementById('outerPanel'));
for (var j = 0; j<42; j++){
var dlId = 'dl'+j;
    app.getElementById(dlId).addClickHandler(dateSelectHandler);
}
app.add(datePanel);
}

function pickDate(p){
var app = UiApp.getActiveApplication();
app.getElementById('monthListBox').setSelectedIndex(today.getMonth());
app.getElementById('yearListBox').setSelectedIndex(numPastYear);
app.getElementById('outerPanel').setVisible(true);
var hiddenBox = app.getElementById('hiddenTB').setText(p.parameter.source).setName('hiddenTB');
app.getElementById('outerPanel').setStyleAttribute('top',p.parameter.clientY)
    .setStyleAttribute('left',p.parameter.clientX).setStyleAttribute('zIndex','1')
    .setStyleAttribute('position','fixed');
return app;
}

function updatePicker(q){
var app =UiApp.getActiveApplication();
var selctedYear = q.parameter.yearListBox;
var selctedMonth = monthArray.indexOf(q.parameter.monthListBox);
var numDays = 32 - new Date(selctedYear, selctedMonth, 32).getDate();
var day1 = new Date(selctedYear, selctedMonth, 1).getDay();
for(var i = 0; i < 42; i++){
    var dlId = 'dl'+i;
    if(i < day1 || i >= day1+numDays)
      app.getElementById(dlId).setVisible(false);
    else
      app.getElementById(dlId).setText((i-day1+1).toString()).setVisible(true);
}
return app;
}
function selectDate(e){
var app = UiApp.getActiveApplication();
var selectedDateId = e.parameter.source.split('l')[1];
var month = e.parameter.monthListBox;
var year = e.parameter.yearListBox;
var day1ofSelectedMonth = new Date(year, monthArray.indexOf(month), 1).getDay();
var dd = selectedDateId-day1ofSelectedMonth+1;
var date = new Date(year, monthArray.indexOf(month), dd);
var formattedDate = Utilities.formatDate(date, scriptTimeZone, dateFormat);
app.getElementById(e.parameter.hiddenTB).setText(formattedDate);
app.getElementById('outerPanel').setVisible(false);
return app;
}
///////////Date Picker code ends here

Please give your valuable comments and suggessions here

Comments