Date Picker display problem

Bobbie Rowley
Bobbie Rowley used Ask the Experts™
on
I am using datetimepicker.js to enter dates, my problem is the pop up seems to be positioned by screen position rather than window position and in chrome pops up behind the window not on top...

My Configured variables

;
var WeekDayName1=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var WeekDayName2=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var exDateTime;//Existing Date and Time
var selDate;//selected date. version 1.7


//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="Date Picker";//Date Time Picker title.
var WeekChar=3;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="/";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var MthSelColor="#cc0033";//color of font of Month selector if "MonthSelector" is "arrow".
var ThemeBg="";//Background image of Calendar window.
var PrecedeZero=true;//Preceding zero [true|false]
var MondayFirstDay=true;//true:Use Monday as first day; false:Sunday as first day. [true|false]  //added in version 1.7
//end Configurable parameters
//end Global variable]

Open in new window



how i handle display

%>
    <tr>
      <td>Expected Completion Date</td>
      <td>&nbsp;</td>
      <td><input  size="50" name="ExpCompDate" value="<%=htmlencode(myWo.ExpCompDate)%>" ID="Text2">
      <a href="javascript:NewCal('Text2','ddmmyyyy')"><img src="/cmms/images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
      </td>
    </tr>
    <%

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Obadiah ChristopherDeveloper User Interface

Commented:
You may probably want to post the js file too, so that someone can better help.

Author

Commented:
My full datepicker script
datetimepicker.js
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Hi Bobbie, could you share with us a screenshot?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
CaptureDatePicker.PNG
NorieAnalyst Assistant

Commented:
Bobbie

Do you actually want the date picker to appear in a separate window?

Author

Commented:
what do you mean?
Obadiah ChristopherDeveloper User Interface

Commented:
He means that the calendar is showing in a different/new window. That’s probably why it shows behind in Chrome. Won’t you want the calendar to show in the same window as ur webpage?
NorieAnalyst Assistant

Commented:
Bobby

Usually with a date picker you would want it to appear next to the control you want the picked date to go in.

I think the code you uploaded for the date picker had been altered to use a new window.

Author

Commented:
ahhh! i thought it was a popup, can the code be altered back to anchor at the control?
NorieAnalyst Assistant

Commented:
Bobbie

Not sure where you got the datetimepicker.js from based on the information in the file I found what I think was the original here - https://www.rainforestnet.com/datetimepicker/datetimepicker-tutorial.htm.

Try downloading that replacing the version you have with that version and see if it works.

If it doesn't work I'll try to see if I can figure out how to 'fix' the file you uploaded.
Hi,

This script is very old.... I would use a recent one, plus recent widget are responsive and have a better UI
They all have display settings that you can adjust easily.

I'm using those one depending of the needs:

https://github.com/uxsolutions/bootstrap-datepicker
https://github.com/Eonasdan/bootstrap-datetimepicker
https://flatpickr.js.org/
https://github.com/dangrossman/daterangepicker

Author

Commented:
Nori, i have that date picker working and its in the page now ty, only problem i have with it now is there is no close option, you have to pick a date to close it...

doesn't close using escape or clicking elsewhere on the page.. do you know a solution to this..


lenamtl
 i know the code is old, but then so is ASP Classic, they are from the same era so probably better than a new one..
NorieAnalyst Assistant

Commented:
Bobbie

How did you get it to work?

Author

Commented:
not mine, the one in the link you posted..
NorieAnalyst Assistant

Commented:
Bobbie

When I try the datepicker from the original code it has a close button in the bottom right corner - see the attached image.
DatePicker.png
Analyst Assistant
Commented:
If you want to have the closing X at the top try finding this line of code,
	winCal.innerHTML = winCalData + vCalHeader + vCalData + vCalTime + vCalClosing;

Open in new window

and replacing it with this.
	winCal.innerHTML = winCalData + vCalHeader + vCalData + vCalClosing + vCalTime;

Open in new window

Author

Commented:
Thank you all, very helpful

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial