Question

我在Web UI上有两个DatePicker对象。最初第一个应显示过去的一天（如2010年1月1日），第二个应显示当天（并且确实如此）。

我用

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

但这不起作用

如何初始化oldDatePicker？

编辑1 - ＆gt;示例 行

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

不提供所需的结果

不工作示例的完整（演示）代码是：

// 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

我不想把它作为回答我自己问题的习惯，但这个也可能对其他人有用。

使用BOTH setCurrentMonth（）和setValue（）在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

如何设置DatePicker的初始日期

1 个答案: