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:

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