How do I set the initial day for a DatePicker

Question

I have two DatePicker objects on a Web UI. Initially the first should display a day in the past (like january 1st 2010), the second should display the current day (and it does).

I use

  var oldDatePicker = myApp.createDatePicker();
  var oldDate = new Date(2010, 1, 1);
  oldDatePicker.setValue(oldDate);

but that doesn't work

How can I initialize my oldDatePicker?

EDIT 1 --> example The lines

var zoekBeginDatum = new Date(2012, 8, 15);
pickerBeginDatum.setValue(zoekBeginDatum);

do not provide the desired result

The full (demo) code of the not working example is:

// Global CONSTANTS to be used for initialization
var globalBeginDatum = '2010/04/24';
var globalEindDatum = '';
var globalUseDatums = 'false';

function doGet()
{ // A script with a user interface that is published as a web app
  // must contain a doGet(e) function.

  // Create 'global' variables, accesible only by this script
  var userProperties = PropertiesService.getUserProperties();
  userProperties.setProperty('globalBeginDatum', globalBeginDatum);
  userProperties.setProperty('globalEindDatum', globalEindDatum);
  userProperties.setProperty('globalUseDatums', globalUseDatums);

  // Create the UiInstance object myApp and set the title text
  var myApp = UiApp.createApplication()
                .setTitle('Test datePicker initialvalue')
                .setHeight(50)
                .setWidth(100);

  var breedteTextBox = 600;
  var gridTexts = myApp.createGrid(3, 2);


  var labelBeginDatum = myApp.createLabel('Begindatum').setId('labelBeginDatum');
  var labelEindDatum = myApp.createLabel('Einddatum').setId('labelEindDatum');

  var pickerBeginDatum = myApp.createDatePicker().setId('pickerBeginDatum').setName('pickerBeginDatum');
  var zoekBeginDatum = new Date(2012, 8, 15);              // Initial date for searching ---> does NOT work
  pickerBeginDatum.setValue(zoekBeginDatum);

  var pickerEindDatum = myApp.createDatePicker().setId('pickerEindDatum').setName('pickerEindDatum');
  var zoekEindDatum = new Date();               // Current date
  pickerEindDatum.setValue(zoekEindDatum);

  var gridDatum = myApp.createGrid(2, 3);
  gridDatum.setWidget(0, 1, labelBeginDatum);
  gridDatum.setWidget(0, 2, labelEindDatum);
  gridDatum.setWidget(1, 1, pickerBeginDatum);
  gridDatum.setWidget(1, 2, pickerEindDatum);

  var gridOptions = myApp.createGrid(9, 1);

  var onClickChkDatums = myApp.createServerHandler('onClickChkDatums');
  var chkDatums = myApp.createCheckBox('Gebruik de begindatum en de einddatum bij het zoeken')
                           .setId('chkDatums').setName('chkDatums')
                           .addClickHandler(onClickChkDatums);

  gridOptions.setWidget(4, 0, chkDatums);

  // Create a vertical panel called verPanel and add it to myApp
  var verPanel = myApp.createVerticalPanel().setWidth('60%').setBorderWidth(2).setStyleAttribute('background', 'lightyellow');;

  var horPanel = myApp.createHorizontalPanel().setWidth('100%').setStyleAttribute('background', 'lightcyan');

  horPanel.add(gridOptions);
  horPanel.add(gridDatum);

  verPanel.add(horPanel);

  labelBeginDatum.setVisible(globalUseDatums == 'true');
  labelEindDatum.setVisible(globalUseDatums == 'true');
  pickerBeginDatum.setVisible(globalUseDatums == 'true');
  pickerEindDatum.setVisible(globalUseDatums == 'true');

// Center verPanel by adding it to another panel occupying whole browser window
  var fullPanel = myApp.createVerticalPanel().setStyleAttribute('background', 'beige');
  fullPanel.setHeight('100%');
  fullPanel.setWidth('100%');
  fullPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
  fullPanel.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE);
  fullPanel.add(verPanel);

  myApp.add(fullPanel);         // Now verPanel will be centered  
  return myApp;
}

// *************** Eventhandlers
function onClickChkDatums(e)
{ // Eventhandler for chkDatums
   var app = UiApp.getActiveApplication();

   var chkDatums = app.getElementById('chkDatums');
   var status = (e.parameter.chkDatums == 'true'); 

   var labelBeginDatum = app.getElementById('labelBeginDatum');
   var labelEindDatum = app.getElementById('labelEindDatum');

   labelBeginDatum.setVisible(status);
   labelEindDatum.setVisible(status);

   var pickerBeginDatum = app.getElementById('pickerBeginDatum');
   var pickerEindDatum = app.getElementById('pickerEindDatum');

   pickerBeginDatum.setVisible(status);
   pickerEindDatum.setVisible(status);

   var userProperties = PropertiesService.getUserProperties();
   userProperties.setProperty('globalUseDatums', status);

   return app;
}

Answer 1

I don't want to make it a habit answering my own questions, but this one might be useful for others as well.

Using BOTH setCurrentMonth() and setValue() shows the right dates in the datePicker

  pickerBeginDatum.setCurrentMonth(zoekBeginDatum);   // Needed !!
  pickerEindDatum.setCurrentMonth(zoekEindDatum);     // Needed !!
  pickerEindDatum.setValue(zoekEindDatum);            // Does ONLY work in combination with setCurrentMonth
  pickerBeginDatum.setValue(zoekBeginDatum);          // Does ONLY work in combination with setCurrentMonth