Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  
<html>
<head>
<title>calen</title>
<script type="text/javascript" src="calen.js"></script>
<link rel="stylesheet" type="text/css" href="calen.css" />
<script type="text/javascript">
var start_datepicker = calen({
    dp_id_name: 'start-calen',      // selector id where to display the datepicker
    id_name: 'start-date',                 // selector id where to populate a selected date
    max_date: '1Y',
    min_date: '0',
    locale: 'en',
    onDateSelected: function() { DatePicked('start-date', end_datepicker); }
});
​
var end_datepicker = calen({
    dp_id_name: 'end-calen',        // selector id where to display the datepicker
    id_name: 'end-date',                   // selector id where to populate a selected date
    max_date: '1Y',
    min_date: '0',
    locale: 'en',
    onDateSelected: function() { DatePicked('end-date'); }
});
</script>
<style type="text/css">
​
.date-pick {
    border: none;
    background-color: #ffffff;
    color: blue;
    font-size: 17px ;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    height: 18px;
    padding: 3px 2px 1px ;
    width: 100px;
}
#jrs_booking_header {
    float: none;
    overflow: hidden;
    width: 167px !important;
}
.jrs_form_text {
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}
.jrs_clr {
    clear: both;
}
#jrs_arrival_input {
    padding: 0 0 1px !important;
    float: left;
    margin: 12px 10px 0px 0px;
}
#jrs_departure_input {
    padding: 0 0 1px !important;
    float: left;
    margin: 12px 0px 0px -10px;
}
#jrs_lodging_select_div {
    padding: 0 0 2px !important;
    margin: 12px 15px 0px 103px;
    float: left;
}
#jrs_location_dropdown_div {
    float: none;
    padding: 0 0 2px 110px !important;
}
.ui-datepicker {
    z-index: 1000;
}
.ui-datepicker-trigger {
    border: medium none !important;
    display: inline !important;
    margin: 0 !important;
    left: -19px;
    position: relative;
    top: 3px;
    vertical-align: top;
    cursor: pointer;
}
.jrs_form_select_item {
    width: 175px !important;
    margin-top: 1px;
    color: #5c371a;
    font-size: 11px !important;
    font-family: Arial, Helvetica, sans-serif;
}
#jrs_search_submit {
    float: right;
    margin: 16px 15px 0px 0px;
}
</style>
</head>
​
<body>
<div id="jrs_calendar_form">
    <input type="hidden" name="sDay" id="sDay" value="03" />
    <input type="hidden" name="sMonth" id="sMonth" value="02" />
    <input type="hidden" name="sYear" id="sYear" value="2013" />
    
    <!-- From Date -->
    <div id="jrs_arrival_input">
        <div class="jrs_form_text">From:</div>
        <span class="jrdp_calendar_pos" id="start-calen"></span>
        <input type="text" name="start-date" id="start-date" class="date-pick" readonly="readonly" value="mm/dd/yy" onclick="start_datepicker.show();" />
        <img class="ui-datepicker-trigger" src="http://s3.amazonaws.com/bookdirect_template_assets/widget_574/assets/cal.png" height="50" width="50" onclick="start_datepicker.show();" alt="" />
    </div>
    <!-- To Date -->
    <div id="jrs_departure_input">
        <div class="jrs_form_text">To:</div>
        <span class="jrdp_calendar_pos" id="end-calen"></span>
        <input type="text" name="end-date" id="end-date" class="date-pick" readonly="readonly" value="mm/dd/yy" onclick="end_datepicker.show();" />
        <img class="ui-datepicker-trigger" src="http://s3.amazonaws.com/bookdirect_template_assets/widget_574/assets/cal.png" height="50" width="50" onclick="end_datepicker.show();" alt="" />
    </div>
    </div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers