Wednesday, November 25, 2009

Javascript Date Picker

The following javascript is a date picker,

In html page:
<input type="text" onclick="displayDatePicker('enquiryDate');"  id="enquiryDate"  />

DatePicker.js:

/*   -----------Date picker start-----------  */

var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";
var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var defaultDateSeparator = "/";
var defaultDateFormat = "dmy";
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;
function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (!displayBelowThisObject)
    displayBelowThisObject = targetDateField;
  if (dtSep)
    dateSeparator = dtSep;
  else
    dateSeparator = defaultDateSeparator;

  if (dtFormat)
    dateFormat = dtFormat;
  else
    dateFormat = defaultDateFormat;
  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }
  drawDatePicker(targetDateField, x, y);
}
function drawDatePicker(targetDateField, x, y)
{
  datePickerTempCanclose=true;
  var dt = getFieldDate(targetDateField.value );
  if (!document.getElementById(datePickerDivID)) {
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("class", "dpDiv");
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;
  refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}
function getLMSGMTDate(){
  try{
    var date = new Date();
    var tempDateArray1 = LMSGMT.split(' ');
 var tempDateArray2 = tempDateArray1[0].split('/');
 var ye = parseInt(tempDateArray2[2]);
 var mo = (parseInt(tempDateArray2[1])==0?parseInt(tempDateArray2[1].charAt(1)):parseInt(tempDateArray2[1]))-1;
 var da = (parseInt(tempDateArray2[0])==0?parseInt(tempDateArray2[0].charAt(1)):parseInt(tempDateArray2[0]));//parseInt(tempDateArray2[0]);
 var tempDateArray3 = tempDateArray1[1].split(':');
 var hour = tempDateArray3[0];
 var min = tempDateArray3[1];
 var sec = tempDateArray3[2];
 var thisDay = new Date(ye,mo,da,hour,min,sec);
 return thisDay;
  }catch(e){return new Date();}
}
function setDateTimePickerToFields(ids){
  var dateTimeArray = LMSGMT.split(' ');
var dateArray = dateTimeArray[0].split('/');
var timeArray = dateTimeArray[1].split(':');
var dateArg = parseInt(dateArray[2]+dateArray[1]+dateArray[0]);
var timeArg = timeArray[0]+timeArray[1];
var id=ids.split(",");
for(var i=0;i<id.length;i++){
var cal = Calendar.setup({
         onSelect: function(cal) {
           cal.hide();
 },
 date: dateArg,
 time:timeArg,
 showTime: 12
     });
     cal.manageFields(id[i], id[i], "%d/%b/%Y %H:%M:%S");
 cal.selection.set(dateArg);
 }
}
function refreshDatePicker(dateFieldName, year, month, day){
  /*var tempDateArray = LMSGMT.split('/');
  var ye = parseInt(tempDateArray[2])-1900;
  var mo = 0;
  var da = parseInt(tempDateArray[0]);
  for(var monIndex =0 ;monIndex<12;monIndex++){
   if(tempDateArray[1]==monthArrayShort[monIndex]){
   mo = monIndex;
   }
  }
  var thisDay = new Date(ye,mo,da);*/
  var thisDay = getLMSGMTDate();
  if ((month >= 0) && (year > 0)) {
   day = thisDay.getDate();
    thisDay = new Date(year, month, 1);
  } else {
    day = thisDay.getDate();
    thisDay.setDate(1);
  }
  var crlf = "\r\n";
  var TABLE = "<table cols=7 class='dpTable'>" + crlf;
  var xTABLE = "</table>" + crlf;
  var TR = "<tr class='dpTR'>";
  var TR_title = "<tr class='dpTitleTR'>";
  var TR_days = "<tr class='dpDayTR'>";
  var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
  var xTR = "</tr>" + crlf;
  var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' onMouseDown=\"datePickerTempCanclose=false;\"";    // leave this tag open, because we'll be adding an onClick event
  var TD_title = "<td colspan=5 class='dpTitleTD'>";
  var TD_buttons = "<td class='dpButtonTD'>";
  var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
  var TD_days = "<td class='dpDayTD'>";
  var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' onMouseDown=\"datePickerTempCanclose=false;\" ";    // leave this tag open, because we'll be adding an onClick event
  var xTD = "</td>" + crlf;
  var DIV_title = "<div class='dpTitleText'>";
  var DIV_selected = "<div class='dpDayHighlight'>";
  var xDIV = "</div>";
  var html = TABLE;
  html += TR_title;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "&lt;") + xTD;
  html += TD_title + DIV_title + monthArrayShort[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
   html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, "&gt;") + xTD;
  html += xTR;
  html += TR_days;
  for(i = 0; i < dayArrayShort.length; i++)
  html += TD_days + dayArrayShort[i] + xTD;
  html += xTR;
  html += TR;
  for (i = 0; i < thisDay.getDay(); i++)
    html += TD + "&nbsp;" + xTD;
  do {
    dayNum = thisDay.getDate();
    TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
    if (dayNum == day)
      html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
    else
      html += TD + TD_onclick + dayNum + xTD;
    if (thisDay.getDay() == 6)
      html += xTR + TR;  
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      html += TD + "&nbsp;" + xTD;
  }
  html += xTR;
  var today = new Date();
  var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayShort[ today.getMonth()] + " " + today.getDate();
  html += TR_todaybutton + TD_todaybutton;
  html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");' onMouseDown=\"datePickerTempCanclose=false;\">this month</button> ";
  html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\");'>close</button>";
  html += xTD + xTR;
  html += xTABLE;
  document.getElementById(datePickerDivID).innerHTML = html;
  adjustiFrame();
}
function getButtonCode(dateFieldName, dateVal, adjust, label)
{
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }
  return "<button class='dpButton' onMouseDown=\"datePickerTempCanclose=false;\" onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";
}
function getDateString(dateVal)
{
  var dayString = "00" + dateVal.getDate();
  var monthString =monthArrayShort[ dateVal.getMonth()];
  dayString = dayString.substring(dayString.length - 2);
  monthString = monthString.substring(monthString.length - 3);
  switch (dateFormat) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}
function getFieldDate(dateString)
{
  var dateVal;
  var dArray;
  var d, m, y;
  try {
    dArray = splitDateString(dateString);
    if (dArray) {
      switch (dateFormat) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date(y, m, d);
    } else if (dateString) {
      dateVal = new Date(dateString);
    } else {
      dateVal = getLMSGMTDate();
    }
  } catch(e) {
    dateVal = getLMSGMTDate();
  }
  return dateVal;
}
function splitDateString(dateString)
{
  var dArray;
  if (dateString.indexOf("/") >= 0)
    dArray = dateString.split("/");
  else if (dateString.indexOf(".") >= 0)
    dArray = dateString.split(".");
  else if (dateString.indexOf("-") >= 0)
    dArray = dateString.split("-");
  else if (dateString.indexOf("\\") >= 0)
    dArray = dateString.split("\\");
  else
    dArray = false;
  return dArray;
}
function updateDateField(dateFieldName, dateString)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString)
    targetDateField.value = dateString;
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";
  adjustiFrame();
  targetDateField.focus();
  if ((dateString) && (typeof(datePickerClosed) == "function"))
    datePickerClosed(targetDateField);
}
function adjustiFrame(pickerDiv, iFrameDiv)
{
  var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (is_opera)
    return;
  try {
    if (!document.getElementById(iFrameDivID)) {
      var newNode = document.createElement("iFrame");
      newNode.setAttribute("id", iFrameDivID);
      newNode.setAttribute("src", "javascript:false;");
      newNode.setAttribute("scrolling", "no");
      newNode.setAttribute ("frameborder", "0");
      document.body.appendChild(newNode);
    }
    if (!pickerDiv)
      pickerDiv = document.getElementById(datePickerDivID);
    if (!iFrameDiv)
      iFrameDiv = document.getElementById(iFrameDivID);
    try {
      iFrameDiv.style.position = "absolute";
      iFrameDiv.style.width = pickerDiv.offsetWidth;
      iFrameDiv.style.height = pickerDiv.offsetHeight ;
      iFrameDiv.style.top = pickerDiv.style.top;
      iFrameDiv.style.left = pickerDiv.style.left;
      iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
      iFrameDiv.style.visibility = pickerDiv.style.visibility ;
      iFrameDiv.style.display = pickerDiv.style.display;
    } catch(e) {
    }
  } catch (ee) {
  }
}
function closeDateField(){
var pickerDiv = document.getElementById(datePickerDivID);
if(pickerDiv){
 pickerDiv.style.visibility = "hidden";
 pickerDiv.style.display = "none";
 adjustiFrame();
   }
   return true;
}
/*   ----------- Date picker end -----------  */


.css:

/*Date picker  start*/

/* the div that holds the date picker calendar */
.dpDiv {
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
font-family:Arial,Helvetica,sans-serif;
font-size: 11px;
text-align: center;
color: #000000;
background-color: #EEEEEE;
border: 1px solid #888888;


}
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
border: 1px solid #C6C6C6;
white-space: nowrap;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
background-color: #C6C6C6;
border: 1px solid #888888;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
background-color: #C6C6C6;
border: 1px solid #888888;
cursor: pointer;
color: #000000;
}
/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
white-space: nowrap;
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
background-color: #C6C6C6;
border: 1px solid #888888;
color: #000000;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
font-size: 12px;
color: #000000;
font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
background-color: #C6C6C6;
color: #000000;
font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
font-family:Arial,Helvetica,sans-serif;
font-size: 11px;
color: #000000;
background: #C6C6C6;
font-weight: bold;
border: 1px solid #888888;
padding: 1px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
font-family:Arial,Helvetica,sans-serif;
font-size: 11px;
color: #000000;
border: 1px solid #888888;
background: #C6C6C6;
font-weight: bold;
padding: 1px;
}


/*Date picker end*/

1 comment:

  1. He has neverasked me out on a date, I am not his girlfriend, I am his sexslave and serve his sexual needs only. one of her men taunted.
    porn stories incest
    adult xxx stories free
    alt sex stories incest
    exotic adult sex stories
    japanese bestiality stories
    He has neverasked me out on a date, I am not his girlfriend, I am his sexslave and serve his sexual needs only. one of her men taunted.

    ReplyDelete