SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting datepicker to work

    i have this page where the datepicker which i pulled from another site(legally) where it functions perfectly. on my site when i chose a date in the dropdown menu it links back to my index page

    here is the page -thanks in advance!

    www.phil
    ipduse
    l.com/bal.html

    the code for the datepicker is

    /*
    * DatePicker
    * @author Rick Hopkins
    * @modified by Micah Nolte and Martin Va?ina
    * @version 0.3.2
    * @classDescription A date picker object. Created with the help of MooTools v1.11
    * MIT-style License.

    -- start it up by doing this in your domready:

    $$('input.DatePicker').each( function(el){
    new DatePicker(el);
    });

    */

    var DatePicker = new Class({

    /* set and create the date picker text box */
    initialize: function(dp){

    // Options defaults
    this.dayChars = 1; // number of characters in day names abbreviation
    this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    this.format = 'mm/dd/yyyy';
    this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
    this.yearOrder = 'asc';
    this.yearRange = 20;
    this.yearStart = 1999; //(new Date().getFullYear());


    // Finds the entered date, or uses the current date
    if(dp.value != '') {
    dp.then = new Date(dp.value);
    dp.today = new Date();
    } else {
    dp.then = dp.today = new Date();
    }
    // Set beginning time and today, remember the original
    dp.oldYear = dp.year = dp.then.getFullYear();
    dp.oldMonth = dp.month = dp.then.getMonth();
    dp.oldDay = dp.then.getDate();
    dp.nowYear = dp.today.getFullYear();
    dp.nowMonth = dp.today.getMonth();
    dp.nowDay = dp.today.getDate();

    // Pull the rest of the options from the alt attr
    if(dp.alt) {
    options = Json.evaluate(dp.alt);
    } else {
    options = [];
    }
    dp.options = {
    monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames,
    daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth,
    dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
    startDay : options.startDay || this.startDay,
    dayChars : options.dayChars || this.dayChars,
    format: options.format || this.format,
    yearStart: options.yearStart || this.yearStart,
    yearRange: options.yearRange || this.yearRange,
    yearOrder: options.yearOrder || this.yearOrder
    };
    dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
    dp.container = false;
    dp.calendar = false;
    dp.interval = null;
    dp.active = false;
    dp.onclick = dp.onfocus = this.create.pass(dp, this);
    },

    /* create the calendar */
    create: function(dp){
    if (dp.calendar) return false;

    // Hide select boxes while calendar is up
    if(window.ie6){
    $$('select').addClass('dp_hide');
    }

    /* create the outer container */
    dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);

    /* create timers */
    dp.container.onmouseover = dp.onmouseover = function(){
    $clear(dp.interval);
    };
    dp.container.onmouseout = dp.onmouseout = function(){
    dp.interval = setInterval(function(){
    if (!dp.active) this.remove(dp);
    }.bind(this), 500);
    }.bind(this);

    /* create the calendar */
    dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);

    /* create the date object */
    var date = new Date();

    /* create the date object */
    if (dp.month && dp.year) {
    date.setFullYear(dp.year, dp.month, 1);
    } else {
    dp.month = date.getMonth();
    dp.year = date.getFullYear();
    date.setDate(1);
    }
    dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;

    /* set the day to first of the month */
    var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);



    /* create the month select box */
    monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
    for (var m = 0; m < dp.options.monthNames.length; m++){
    monthSel.options[m] = new Option(dp.options.monthNames[m], m);
    if (dp.month == m) monthSel.options[m].selected = true;
    }

    /* create the year select box */
    yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
    i = 0;
    dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
    if (dp.options.yearOrder == 'desc'){
    for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
    yearSel.options[i] = new Option(y, y);
    if (dp.year == y) yearSel.options[i].selected = true;
    i++;
    }
    } else {
    for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
    yearSel.options[i] = new Option(y, y);
    if (dp.year == y) yearSel.options[i].selected = true;
    i++;
    }
    }

    /* start creating calendar */
    calTable = new Element('table');
    calTableThead = new Element('thead');
    calSelRow = new Element('tr');
    calSelCell = new Element('th', {'colspan':'7'});
    monthSel.injectInside(calSelCell);
    yearSel.injectInside(calSelCell);
    calSelCell.injectInside(calSelRow);
    calSelRow.injectInside(calTableThead);
    calTableTbody = new Element('tbody');

    /* create day names */
    calDayNameRow = new Element('tr');
    for (var i = 0; i < dp.options.dayNames.length; i++) {
    calDayNameCell = new Element('th');
    calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars));
    calDayNameCell.injectInside(calDayNameRow);
    }
    calDayNameRow.injectInside(calTableTbody);

    /* create the day cells */
    while (firstDay <= dp.options.daysInMonth[dp.month]){
    calDayRow = new Element('tr');
    for (i = 0; i < 7; i++){
    if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
    calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
    } else {
    calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
    }
    // Show the previous day
    if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
    calDayCell.addClass('dp_selected');
    }
    // Show today
    if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
    calDayCell.addClass('dp_today');
    }
    firstDay++;
    }
    calDayRow.injectInside(calTableTbody);
    }

    /* table into the calendar div */
    calTableThead.injectInside(calTable);
    calTableTbody.injectInside(calTable);
    calTable.injectInside(dp.calendar);

    /* set the onmouseover events for all calendar days */
    $$('td.' + dp.id + '_calDay').each(function(el){
    el.onmouseover = function(){
    el.addClass('dp_roll');
    }.bind(this);
    }.bind(this));

    /* set the onmouseout events for all calendar days */
    $$('td.' + dp.id + '_calDay').each(function(el){
    el.onmouseout = function(){
    el.removeClass('dp_roll');
    }.bind(this);
    }.bind(this));

    /* set the onclick events for all calendar days */
    $$('td.' + dp.id + '_calDay').each(function(el){
    el.onclick = function(){
    ds = el.axis.split('|');
    dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
    this.remove(dp);
    }.bind(this);
    }.bind(this));

    /* set the onchange event for the month & year select boxes */
    monthSel.onfocus = function(){ dp.active = true; };
    monthSel.onchange = function(){
    dp.month = monthSel.value;
    dp.year = yearSel.value;
    this.remove(dp);
    this.create(dp);
    }.bind(this);

    yearSel.onfocus = function(){ dp.active = true; };
    yearSel.onchange = function(){
    dp.month = monthSel.value;
    dp.year = yearSel.value;
    this.remove(dp);
    this.create(dp);
    }.bind(this);
    },

    /* Format the returning date value according to the selected formation */
    formatValue: function(dp, year, month, day){
    /* setup the date string variable */
    var dateStr = '';

    /* check the length of day */
    if (day < 10) day = '0' + day;
    if (month < 10) month = '0' + month;

    /* check the format & replace parts // thanks O'Rey */
    dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
    dp.month = dp.oldMonth = '' + (month - 1) + '';
    dp.year = dp.oldYear = year;
    dp.oldDay = day;

    /* return the date string value */
    return dateStr;
    },

    /* Remove the calendar from the page */
    remove: function(dp){
    $clear(dp.interval);
    dp.active = false;
    if (window.opera) dp.container.empty();
    else if (dp.container) dp.container.remove();
    dp.calendar = false;
    dp.container = false;
    $$('select.dp_hide').removeClass('dp_hide');
    }
    });

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code


    Code JavaScript:
     <script type="text/javascript"> <!--  var viewportwidth; var viewportheight;  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight  if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth, viewportheight = window.innerHeight }  // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)  else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight }  // older versions of IE  else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportheight = document.getElementsByTagName('body')[0].clientHeight }    if (window.location.search == "") { window.location.href = window.location + "?sw=" + viewportwidth + "&sh=" + viewportheight; }  //--> </script>

    occurs before the <html> tag.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two issues


    1- the website i pulled this from was configure the same way, same order and works great

    2- moving the script into the head makes no difference.

    this must be something about Ids or interactions with other scripts...i dont know----but i feel this way because why would it work on another site

    please help me out

    thanks a lot!

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    an example of what im talking about

    i click on the 2010 option and the adress it send me to is "mysite/?sd=0&sw=1040&sh=690&d=2010" except instead of being all the pictures completed in 2010 it is my index. how do i fix this?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by phillycheese123 View Post
    an example of what im talking about

    i click on the 2010 option and the adress it send me to is "mysite/?sd=0&sw=1040&sh=690&d=2010" except instead of being all the pictures completed in 2010 it is my index. how do i fix this?
    Which web browsers are you having problems with?

    When I choose the 2010 option from Google Chrome 12 or Internet Explorer 9 or Mozilla Firefox 5, I get redirected to the 2010.html page as seems appropriate.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •