www.webdeveloper.com
Results 1 to 10 of 10

Thread: Date picker change format

  1. #1
    Join Date
    Dec 2011
    Posts
    4

    Date picker change format

    How would I rewrite the calendar control code below to return the date in full format?Like Saturday, December 2, 2011

    function positionInfo(object) {
    var p_elm = object;
    this.getElementLeft = getElementLeft;
    function getElementLeft() {
    var x = 0;
    var elm;
    if(typeof(p_elm) == "object"){
    elm = p_elm;
    } else {
    elm = document.getElementById(p_elm);
    }
    while (elm != null) {
    if(elm.style.position == 'relative') {
    break;
    }
    else {
    x += elm.offsetLeft;
    elm = elm.offsetParent;
    }
    }
    return parseInt(x);
    }
    this.getElementWidth = getElementWidth;
    function getElementWidth(){
    var elm;
    if(typeof(p_elm) == "object"){
    elm = p_elm;
    } else {
    elm = document.getElementById(p_elm);
    }
    return parseInt(elm.offsetWidth);
    }

    this.getElementRight = getElementRight;
    function getElementRight(){
    return getElementLeft(p_elm) + getElementWidth(p_elm);
    }

    this.getElementTop = getElementTop;
    function getElementTop() {
    var y = 0;
    var elm;
    if(typeof(p_elm) == "object"){
    elm = p_elm;
    } else {
    elm = document.getElementById(p_elm);
    }
    while (elm != null) {
    if(elm.style.position == 'relative') {
    break;
    }
    else {
    y+= elm.offsetTop;
    elm = elm.offsetParent;
    }
    }
    return
    this.getElementBottom = getElementBottom;
    function getElementBottom(){
    return getElementTop(p_elm) + getElementHeight(p_elm);
    }
    }

    function CalendarControl() {

    var calendarId = 'CalendarControl';
    var currentYear = 0;
    var currentMonth = 0;
    var currentDay = 0;

    var selectedYear = 0;
    var selectedMonth = 0;
    var selectedDay = 0;

    var months = ['January','February','March','April','May','June','July','August','September','October','November',' December'];
    var dateField = null;

    function getProperty(p_property){
    var p_elm = calendarId;
    var elm = null;

    if(typeof(p_elm) == "object"){
    elm = p_elm;
    } else {
    elm = document.getElementById(p_elm);
    }
    if (elm != null){
    if(elm.style){
    elm = elm.style;
    if(elm[p_property]){
    return elm[p_property];
    } else {
    return null;
    }
    } else {
    return null;
    }
    }
    }

    function setElementProperty(p_property, p_value, p_elmId){
    var p_elm = p_elmId;
    var elm = null;

    if(typeof(p_elm) == "object"){
    elm = p_elm;
    } else {
    elm = document.getElementById(p_elm);
    }
    if((elm != null) && (elm.style != null)){
    elm = elm.style;
    elm[ p_property ] = p_value;
    }
    }

    function setProperty(p_property, p_value) {
    setElementProperty(p_property, p_value, calendarId);
    }

    function getDaysInMonth(year, month) {
    return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
    }

    function getDayOfWeek(year, month, day) {
    var date = new Date(year,month-1,day)
    return date.getDay();
    }

    this.clearDate = clearDate;
    function clearDate() {
    dateField.value = '';
    hide();
    }

    this.setDate = setDate;
    function setDate(year, month, day) {
    if (dateField) {
    if (month < 10) {month = "0" + month;}
    if (day < 10) {day = "0" + day;}

    var dateString = month+"-"+day+"-"+year;
    dateField.value = dateString;
    hide();
    }
    return;
    }

    this.changeMonth = changeMonth;
    function changeMonth(change) {
    currentMonth += change;
    currentDay = 0;
    if(currentMonth > 12) {
    currentMonth = 1;
    currentYear++;
    } else if(currentMonth < 1) {
    currentMonth = 12;
    currentYear--;
    }

    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
    }

    this.changeYear = changeYear;
    function changeYear(change) {
    currentYear += change;
    currentDay = 0;
    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
    }

    function getCurrentYear() {
    var year = new Date().getYear();
    if(year < 1900) year += 1900;
    return year;
    }

    function getCurrentMonth() {
    return new Date().getMonth() + 1;
    }

    function getCurrentDay() {
    return new Date().getDate();
    }

    function calendarDrawTable() {

    var dayOfMonth = 1;
    var validDay = 0;
    var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
    var daysInMonth = getDaysInMonth(currentYear, currentMonth);
    var css_class = null; //CSS class for each day

    var table = "<table cellspacing='0' cellpadding='0' border='0'>";
    table = table + "<tr class='header'>";
    table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
    table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
    table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
    table = table + "</tr>";
    table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

    for(var week=0; week < 6; week++) {
    table = table + "<tr>";
    for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
    if(week == 0 && startDayOfWeek == dayOfWeek) {
    validDay = 1;
    } else if (validDay == 1 && dayOfMonth > daysInMonth) {
    validDay = 0;
    }

    if(validDay) {
    if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
    css_class = 'current';
    } else if (dayOfWeek == 0 || dayOfWeek == 6) {
    css_class = 'weekend';
    } else {
    css_class = 'weekday';
    }

    table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfM onth+"</a></td>";
    dayOfMonth++;
    } else {
    table = table + "<td class='empty'>&nbsp;</td>";
    }
    }
    table = table + "</tr>";
    }

    table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
    table = table + "</table>";

    return table;
    }

    this.show = show;
    function show(field) {
    can_hide = 0;

    // If the calendar is visible and associated with
    // this field do not do anything.
    if (dateField == field) {
    return;
    } else {
    dateField = field;
    }

    if(dateField) {
    try {
    var dateString = new String(dateField.value);
    var dateParts = dateString.split("-");

    selectedMonth = parseInt(dateParts[0],10);
    selectedDay = parseInt(dateParts[1],10);
    selectedYear = parseInt(dateParts[2],10);
    } catch(e) {}
    }

    if (!(selectedYear && selectedMonth && selectedDay)) {
    selectedMonth = getCurrentMonth();
    selectedDay = getCurrentDay();
    selectedYear = getCurrentYear();
    }

    currentMonth = selectedMonth;
    currentDay = selectedDay;
    currentYear = selectedYear;

    if(document.getElementById){

    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

    setProperty('display', 'block');

    var fieldPos = new positionInfo(dateField);
    var calendarPos = new positionInfo(calendarId);

    var x = fieldPos.getElementLeft();
    var y = fieldPos.getElementBottom();

    setProperty('left', x + "px");
    setProperty('top', y + "px");

    if (document.all) {
    setElementProperty('display', 'block', 'CalendarControlIFrame');
    setElementProperty('left', x + "px", 'CalendarControlIFrame');
    setElementProperty('top', y + "px", 'CalendarControlIFrame');
    setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
    setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
    }
    }
    }

    this.hide = hide;
    function hide() {
    if(dateField) {
    setProperty('display', 'none');
    setElementProperty('display', 'none', 'CalendarControlIFrame');
    dateField = null;
    }
    }

    this.visible = visible;
    function visible() {
    return dateField
    }

    this.can_hide = can_hide;
    var can_hide = 0;
    }

    var calendarControl = new CalendarControl();

    function showCalendarControl(textField) {
    // textField.onblur = hideCalendarControl;
    calendarControl.show(textField);
    }

    function clearCalendarControl() {
    calendarControl.clearDate();
    }

    function hideCalendarControl() {
    if (calendarControl.visible()) {
    calendarControl.hide();
    }
    }

    function setCalendarControlDate(year, month, day) {
    calendarControl.setDate(year, month, day);
    }

    function changeCalendarControlYear(change) {
    calendarControl.changeYear(change);
    }

    function changeCalendarControlMonth(change) {
    calendarControl.changeMonth(change);
    }

    document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
    document.write("<div id='CalendarControl'></div>");

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Doesn't anyone ever read the posting threads?

    Wrap you code please......................
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  3. #3
    Join Date
    Dec 2011
    Posts
    4

    Will wrap in the future. Sorry.

    How do I set datestring to full date?

  4. #4
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    It depends on how you are generating your date.

    If it was me, I would be using toGMTString() to return an RFC type date format that will return the time in the following format...

    Wed, 19 Jan 2005 01:30:00 GMT

    Then I would chop out the bits I need.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  5. #5
    Join Date
    Dec 2011
    Posts
    4

    I'm not worthy but asking anyhow

    The code is there to see how date is being generated.
    The line ****var dateString = month+"/"+day+"/"+year;****
    I am not a javascript writer. I'm not worthy of your help but am asking anyway.
    I know how to format the date and do what I need with it once it's been entered in my database. I just want the string that is returned to the text input field to have the day of the week. and full month. Is that possible with some tweaks to what I have?

  6. #6
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    776
    Hi Georgejjj,

    Is dateString really where you need the formatting to come from?
    I tried using the script you provided, but ran into errors preventing me to see how it works.

  7. #7
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    All I can say is if your not going to use the world wide accepted date format of DD/MM/YYYY then you should be using the ISO 8601 date format of YYYY/MM/DD HH:MM:SS which in computing terms is... well known.

    The format you have chosen is not use in many countries, 4 including the USA from memory where as the rest use... DD/MM/YYYY and when that is not possible the ISO format takes over.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  8. #8
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    776
    Ok, well if it is...

    Code:
    var thedate = new Date(year, month - 1, day), dateString;
    dateString =
    	['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][thedate.getDay()] + 'day' + ', ' +
    	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][thedate.getMonth()] + ' ' +
    	thedate.getDate() + ', ' +
    	thedate.getFullYear();
    I know the Calendar control has some of this information inside of it, but I don't know how to access it currently while the script is broken.

    I saw someplace else where the dateString is broken back up and put into local variables, but thats another story.

  9. #9
    Join Date
    Dec 2011
    Posts
    4

    I didn't have enough characters on first post

    I didn't have enough characters on first post so I cut out part of the code. Original script exists here. It seems small and easier than many others..????

  10. #10
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    776
    Well at least I had done it right

    Your problem now is when you show the calendar control again, it would try split up the date in the <input>, but obviously it's in the wrong format.
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles