Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Switch to JQuery datepicker #9

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Switch to JQuery datepicker #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da48138
Switched to JQuery datepicker
aruethe2 Nov 22, 2022
5374502
Removed old datepicker install info
aruethe2 Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 1 addition & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,30 +54,7 @@ need this. (Authentication for this has recently gotten very complicated - I'm
* `Tie::Handle::CSV`: If you use the script for parsing
the exoplanets.org CSV file, you'll need this.

* `Date-Picker`: If you want to have a nice pop-up calendar widget for selecting dates
in the interface for specifying the date range to be considered, you
can download and install the `Date-Picker` widget from
http://www.frequency-decoder.com/2009/09/09/unobtrusive-date-picker-widget-v5

The actual download link is toward the bottom of the page:
http://www.frequency-decoder.com/demo/date-picker-v5/date-picker-v5.zip

There is a call to this in the supplied default input form, assuming
it is installed in a subdirectory called `src` below the directory
where the form is installed. To use, just unpack the zip file into
that `src` subdirectory, and make sure everything is readable by users
of your webserver:
`chmod -R o+rx src/`

For my own installation, I also edited the file
`src/date-picker-v5/js/lang/en.js` to make Sunday be displayed as the
first day of the week: `firstDayOfWeek:6` It was set to O (Monday) by
default.

To use a different localization, change the call in the header of the
input form to load a different language file from that subdirectory.

If you run the code for creating finding charts, you'll need the tools
* If you run the code for creating finding charts, you'll need the tools
`convert` and `identify` from `ImageMagick` to be installed and in your
path.

Expand Down
43 changes: 23 additions & 20 deletions airmass.cgi
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,14 @@ print << "END_1";

<html>
<head>
<title>Airmass Plots</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<!-- JQuery UI Datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script type="text/javascript">

function hide(obj) {
Expand Down Expand Up @@ -258,22 +264,25 @@ print << "END_1";
}
}

</script>


<script type="text/javascript"
src="./src/date-picker-v5/js/lang/en.js">
</script>
// Initialize datepicker objects
\$( function() {
// Regular expression for mm-dd-yyyy or m-d-yyyy
const re =/\\d{1,2}-\\d{1,2}-\\d{4}/
\$( ".datepicker" ).datepicker({
dateFormat: "mm-dd-yy",
constrainInput: false
}).change(function() {
// When date is changed, check to see if not a valid date format or not "today" then invalidate entry
const dateInput = \$(this).val();
if (!re.test(dateInput) && dateInput.toLowerCase() != "today") {
\$(this).datepicker("setDate", "");
}
});
});

<script type="text/javascript"
src="./src/date-picker-v5/js/datepicker.packed.js">
</script>

<link href="./src/date-picker-v5/css/datepicker.css"
rel="stylesheet" type="text/css" />


<title>Airmass Plots</title>

<link rel="stylesheet" href="page_style.css" type="text/css">

Expand Down Expand Up @@ -505,16 +514,10 @@ print << "END_3";

<p>
Date for airmass plot (mm-dd-yyyy or <i>'today'</i>):
<input type="text" value="today" size="15"
id="start_date" name="start_date" style="text-align:center" />
<input type="text" size="15" value="today"
id="start_date" name="start_date" class="datepicker" style="text-align:center" />
</p>

<script type="text/javascript">
datePickerController.createDatePicker(
{formElements:{"start_date":"m-ds-d-ds-Y"}}
);
</script>

<p>
Target name:
<input type="text" size="15"
Expand Down
41 changes: 22 additions & 19 deletions transits.cgi
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,7 @@ if ($ENV{'HTTP_REFERER'} =~ /exoplanet-watch/) {

# Add some Javascript functions to the header; these will let
# us show/hide some elements on the fly, as needed; and they also pull
# in source code for the date-picker widget.
# in source code for the datepicker widget.


print << "END_1";
Expand All @@ -360,6 +360,11 @@ observability of the known transiting exoplanets or TESS Objects of Interest
plots." />
<meta property="og:image" content="https://astro.swarthmore.edu/transits/transit_finder_example_small.png" />

<!-- JQuery UI Datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script type="text/javascript">

function hide(obj) {
Expand Down Expand Up @@ -388,20 +393,24 @@ observability of the known transiting exoplanets or TESS Objects of Interest
}
}

</script>
// Initialize datepicker objects
\$( function() {
// Regular expression for mm-dd-yyyy or m-d-yyyy
const re =/\\d{1,2}-\\d{1,2}-\\d{4}/
\$( ".datepicker" ).datepicker({
dateFormat: "mm-dd-yy",
constrainInput: false
}).change(function() {
// When date is changed, check to see if not a valid date format or not "today" then invalidate entry
const dateInput = \$(this).val();
if (!re.test(dateInput) && dateInput.toLowerCase() != "today") {
\$(this).datepicker("setDate", "");
}
});
});

<script type="text/javascript"
src="./src/date-picker-v5/js/lang/en.js">
</script>

<script type="text/javascript"
src="./src/date-picker-v5/js/datepicker.packed.js">
</script>

<link href="./src/date-picker-v5/css/datepicker.css"
rel="stylesheet" type="text/css" />


<title>Transit Finder</title>

<link rel="stylesheet" href="page_style.css" type="text/css">
Expand Down Expand Up @@ -869,15 +878,9 @@ print << "END_3";
date starts search at local noon at observatory on that date.">
Base date for transit list (mm-dd-yyyy or <i>'today'</i>):
<input type="text" value="today" size="10"
id="start_date" name="start_date" style="text-align:center" />
id="start_date" name="start_date" class="datepicker" style="text-align:center" />
</p>

<script type="text/javascript">
datePickerController.createDatePicker(
{formElements:{"start_date":"m-ds-d-ds-Y"}}
);
</script>

<p>
From that date, show transits for the next
<INPUT NAME="days_to_print" VALUE="$days_to_print" size="4" autofocus /> days.
Expand Down