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