如何创建一个下拉时间选择

Question

我想创建一个像Google日历一样的TimeBox从使用Google Apps脚本的时间，但没有createTimeBox方法，我应该怎么做？

使用createDateBox()方法我可以创建一个扩展日历选择，但我不知道如何创建一个下拉时间选择。

我还没有找到UiApp方法有关创建下拉时间选择同谷歌日历的从时间

Answer 1

您可以创建时间自定义列表框，分的列表框和AM/PM之间的选择。假设你想用日期+时间进一步做一些事情，你需要将小时和分钟数转换为毫秒，并将它们添加到date.getTime（）中。

Demo

function doGet() { 
    var app = UiApp.createApplication(); 
    var hpanel = app.createHorizontalPanel(); 
    var dateBox = app.createDateBox().setId('dateBox').setName('dateBox'); 
    var hour = app.createListBox(false).setId('hour').setName('hour') 
    .addItem(1).addItem(2).addItem(3); // ADD ALL THE HOURS YOU WANT 

    var min = app.createListBox(false).setId('minute').setName('minute') 
    .addItem('00').addItem('15').addItem('30').addItem('45'); // ADD ALL THE MINUTES YOU WANT 

    var amPm = app.createListBox(false).setId('am').setName('amPm') 
    .addItem('AM').addItem('PM'); 

    var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel'); 
    var submit = app.createButton('Submit').setId('submit'); 

    // SUBMIT HANDLERS 
    var handler1 = app.createClientHandler().forEventSource().setEnabled(false); 
    var handler2 = app.createServerHandler('showDate').addCallbackElement(hpanel); 
    submit.addClickHandler(handler1).addClickHandler(handler2); 

    hpanel.add(dateBox).add(hour).add(min).add(amPm).add(submit).add(dateTimeLabel); 
    app.add(hpanel); 
    return app; 
} 

function showDate(e) { 
    var app = UiApp.getActiveApplication(); 
    var date = e.parameter.dateBox; 
    var timeZone = date.toString().substr(25,6)+":00"; // SCRIPT TIME ZONE 
    var dateMilli = date.getTime(); // GET MILLISECONDS OF DATE PICKED 
    var hour = parseInt(e.parameter.hour); // TURN INTO NUMBER 
    var amPm = e.parameter.amPm; 
    if (amPm == 'PM' && hour != 12) hour = hour + 12; // ADD 12 HOURS TO PM HOURS, EXCEPT 12PM 
    if (hour == 12 && amPm == 'AM') hour = 0; // HANDLE 12AM HOUR CORRECTLY 
    var hourMilli = hour * 3600000; // # OF MILLISECONDS IN 1 HOUR 
    var minMilli = parseInt(e.parameter.minute) * 60000; // # OF MILLISECONDS IN 1 MIN 
    var milliTotal = dateMilli + hourMilli + minMilli; // ADD ALL MILLISECOND TOGETHER 

    // PUT TOTAL MILLISECONDS INTO A NEW DATE AND CREATE CUSTOM FORMAT 
    // THIS MIGHT NOT BE THE USER'S BROWSER TIME ZONE 
    var newDate = Utilities.formatDate(new Date(milliTotal), timeZone, 'MM/dd/yy hh:mm aaa'); 
    app.getElementById('dateTimeLabel').setText(newDate); 
    app.getElementById('submit').setEnabled(true); 
    return app; 
} 

如果需要显示日期+时间回在其浏览器的时区的用户 - 你需要知道他们是提前的时间是什么，并设置它在脚本属性。除非有办法以编程方式自动调整脚本时区...？

Answer 2

这里是Bryan脚本的一个变体，它有一个或两个小改进来处理case小时= 0和dateBox上的验证器，以防止在未选择日期时抛出错误。

function doGet() { 
    var app = UiApp.createApplication(); 
    var hpanel = app.createHorizontalPanel(); 
    var dateBox = app.createDateBox().setId('dateBox').setName('dateBox'); 
    var hour = app.createListBox(false).setId('hour').setName('hour') 
    for(h=0;h<13;++h){hour.addItem(h)} 

    var min = app.createListBox(false).setId('minute').setName('minute') 
    .addItem('00').addItem('15').addItem('30').addItem('45'); // ADD ALL THE MINUTES YOU WANT 

    var amPm = app.createListBox(false).setId('am').setName('amPm') 
    .addItem('AM').addItem('PM'); 

    var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel'); 
    var submit = app.createButton('Submit').setId('submit'); 

    // SUBMIT HANDLERS 
    var handler1 = app.createClientHandler().validateMatches(dateBox, '2','g').forEventSource().setEnabled(false); 
    var handler2 = app.createServerHandler('showDate').validateMatches(dateBox, '2','g').addCallbackElement(hpanel); 
    submit.addClickHandler(handler1).addClickHandler(handler2); 

    hpanel.add(dateBox).add(hour).add(min).add(amPm).add(submit); 
    app.add(hpanel).add(dateTimeLabel); 
    return app; 
} 

function showDate(e) { 
    var app = UiApp.getActiveApplication(); 
    var date = e.parameter.dateBox; 
    var timeZone = date.toString().substr(25,6)+":00"; // timezone of this date according to script TZ 
    var hour = Number(e.parameter.hour); // TURN INTO NUMBER 
    var min = Number(e.parameter.minute); // TURN INTO NUMBER 
    var amPm = e.parameter.amPm; 
    if (amPm == 'PM'){hour = hour+12}; // ADD 12 HOURS TO PM HOURS 
    if (hour == 24){hour = 0 ;amPm='AM'}; // HANDLE 24 HOUR CORRECTLY 
    var newDate=new Date(date) 
    newDate.setHours(hour,min,0,0);//set hours minutes sec and milliSecs 
    var newDate = Utilities.formatDate(newDate, timeZone, 'MM/dd/yy hh:mm aaa'); 
    app.getElementById('dateTimeLabel').setText(newDate); 
    app.getElementById('submit').setEnabled(true); 
    return app; 
}