Date picker

Hay am learning  javascript and ajax and trying to create a date picker without using Jquery but all the examples on line are for query can someone help me and show me how it cold be down.
Harkin32Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
what have you done so far? what in particular are you struggling with?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Harkin32Author Commented:
Hi Kyle Hamiliton I am trying to Insert new patients on the database and show the result row being inserted after insertion using ajax. So far I have the client side script almost complete. I have figured out how to do most of the the things I need to do but I don't have a clue how to do a date picker and using ajax JavaScript or HTML and if I look on
line  all the examples I can find are for JQuery which I don't know yet so I don't want to use JQuery.

Here is my code so far.

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{
   
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
      
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
         
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   
   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   ajaxRequest.onreadystatechange = function(){
   
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('ajaxDiv');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
   
   // Now get the value from user and pass it to
   // server script.
   var age = document.getElementById('patid').value;
   var age = document.getElementById('name').value;
   var wpm = document.getElementById('appointment').value;
   var sex = document.getElementById('ward').value;
   var sex = document.getElementById('xray').value;
   var sex = document.getElementById('mri').value;
   var sex = document.getElementById('cscan').value;
   var sex = document.getElementById('eye').value;
   var sex = document.getElementById('hearing').value;
   var sex = document.getElementById('date').value;
   var queryString = "?name=" + name ;
   
   queryString +=  "&patid=" + patid + "&name=" + name + "&appointment=" + appointment   + "&ward=" + ward+   "&xray=" + xray + "&mri=" + wmri + "&cscan=" + cscan + "&eye="   + eye + "&earing=" +   earing + "&date=" + date;
   ajaxRequest.open("GET", "practical5_3_1.php" + queryString, true);
   ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>
   Full name: <input type='text' id='name' /> <br />
   Type of Appointment: 
   <select id='appointment'>
      <option value=""></option>
      <option value="GP">GP</option>
      <option value="Specialist">Specialist</option>
      <option value="Surgery">Surgery</option>
   </select>
   Admitted to ward: 
   <select id='ward'>
      <option value=""></option>
      <option value="Not Admitted">Not Admitted</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
   </select> <br />
   x-rays taken:
   <select id='xray'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   mri carried out:
   <select id='mri'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> <br />
   CAT scan carried out:
   <select id='cscan'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   Eye test carried out:
   <select id='eye'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select><br />
   Hearing test carried out:
   <select id='hearing'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select>
   
  
   <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>
   
</form>
<div id='ajaxDiv'>Results</div>

Open in new window

0
Harkin32Author Commented:
Hi Kyle Hamiliton I am trying to Insert new patients on the database and show the result row being inserted after insertion using ajax. So far I have the client side script almost complete. I have figured out how to do most of the the things I need to do but I don't have a clue how to do a date picker and using ajax JavaScript or HTML and if I look on
line  all the examples I can find are for JQuery which I don't know yet so I don't want to use JQuery.

Here is my code so far.

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{
   
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
      
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
         
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   
   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   ajaxRequest.onreadystatechange = function(){
   
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('ajaxDiv');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
   
   // Now get the value from user and pass it to
   // server script.
   var age = document.getElementById('patid').value;
   var age = document.getElementById('name').value;
   var wpm = document.getElementById('appointment').value;
   var sex = document.getElementById('ward').value;
   var sex = document.getElementById('xray').value;
   var sex = document.getElementById('mri').value;
   var sex = document.getElementById('cscan').value;
   var sex = document.getElementById('eye').value;
   var sex = document.getElementById('hearing').value;
   var sex = document.getElementById('date').value;
   var queryString = "?name=" + name ;
   
   queryString +=  "&patid=" + patid + "&name=" + name + "&appointment=" + appointment   + "&ward=" + ward+   "&xray=" + xray + "&mri=" + wmri + "&cscan=" + cscan + "&eye="   + eye + "&earing=" +   earing + "&date=" + date;
   ajaxRequest.open("GET", "practical5_3_1.php" + queryString, true);
   ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>
   Full name: <input type='text' id='name' /> <br />
   Type of Appointment: 
   <select id='appointment'>
      <option value=""></option>
      <option value="GP">GP</option>
      <option value="Specialist">Specialist</option>
      <option value="Surgery">Surgery</option>
   </select>
   Admitted to ward: 
   <select id='ward'>
      <option value=""></option>
      <option value="Not Admitted">Not Admitted</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
   </select> <br />
   x-rays taken:
   <select id='xray'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   mri carried out:
   <select id='mri'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> <br />
   CAT scan carried out:
   <select id='cscan'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   Eye test carried out:
   <select id='eye'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select><br />
   Hearing test carried out:
   <select id='hearing'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select>
   
  
   <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>
   
</form>
<div id='ajaxDiv'>Results</div>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Kyle HamiltonData ScientistCommented:
This code is the ajax request code.

Have you done anything to start writing the date picker code?

Your question as it stands is too broad. You haven't even provided a starting point. Writing a date picker from scratch is not a trivial task, and there can be lots of approaches to the problem. You need to start somewhere and ask specific questions. If you are not able to decipher the jquery examples, it's possible that your javascript skills aren't up to the task yet.

If this is a work assignment, you are better off using something someone else has already built. The following link is an example of a date picker some one else wrote in vanilla js (ie, no jquery)

https://github.com/joshsalverda/datepickr

You can study this code to learn from it, or use it out of the box. I'm sure there are other examples out there. search for
plain javascript date picker
or something along those lines.
0
Harkin32Author Commented:
HI Kyle I Kind of got a little bit further with this. So what am trying to do here is update a patient database where.
A doctor can record information for a patient. Information to be recorded.
 
Name

Appointment type  GP , Specialist or Surgery

ward admitted to    A, B, C, or not admitted

all of the following are simple yes or no selection boxes
Xray
mri
CAT scan
eye test
Hearing test

all of the above I think I am doing correctly.

It is when I get to  selecting a date of the appointment.

 I am  getting stuck I would like to implement a date picker with out using jquery.

Her is all my client side code so far with most of the displaying in a testing browser. The only part I cant get to work/display is the data picker so the user can pick a date .

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{
   
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
      
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
         
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   
   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   ajaxRequest.onreadystatechange = function(){
   
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('ajaxDiv');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
   
   // Now get the value from user and pass it to
   // server script.
   var age = document.getElementById('patid').value;
   var age = document.getElementById('name').value;
   var wpm = document.getElementById('appointment').value;
   var sex = document.getElementById('ward').value;
   var sex = document.getElementById('xray').value;
   var sex = document.getElementById('mri').value;
   var sex = document.getElementById('cscan').value;
   var sex = document.getElementById('eye').value;
   var sex = document.getElementById('hearing').value;
   var sex = document.getElementById('date').value;
   var queryString = "?name=" + name ;
   
   queryString +=  "&patid=" + patid + "&name=" + name + "&appointment=" + appointment   + "&ward=" + ward+   "&xray=" + xray + "&mri=" + wmri + "&cscan=" + cscan + "&eye="   + eye + "&earing=" +   earing + "&date=" + date;
   ajaxRequest.open("GET", "practical5_3_1.php" + queryString, true);
   ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>
   Full name: <input type='text' id='name' /> <br />
   Type of Appointment: 
   <select id='appointment'>
      <option value=""></option>
      <option value="GP">GP</option>
      <option value="Specialist">Specialist</option>
      <option value="Surgery">Surgery</option>
   </select>
   Admitted to ward: 
   <select id='ward'>
      <option value=""></option>
      <option value="Not Admitted">Not Admitted</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
   </select> <br />
   x-rays taken:
   <select id='xray'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   mri carried out:
   <select id='mri'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> <br />
   CAT scan carried out:
   <select id='cscan'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select> 
   Eye test carried out:
   <select id='eye'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select><br />
   Hearing test carried out:
   <select id='hearing'>
      <option value=""></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select>
<script language="javascript" type="text/javascript">
  // Strings and translations

monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
showMonthsShort: undefined
showWeekdaysFull: undefined

// Buttons
today: 'Today'
clear: 'Clear'
close: 'Close'

// Accessibility labels
labelMonthNext: 'Next month'
labelMonthPrev: 'Previous month'
labelMonthSelect: 'Select a month'
labelYearSelect: 'Select a year'

// Formats
format: 'd mmmm, yyyy'
formatSubmit: undefined
hiddenPrefix: undefined
hiddenSuffix: '_submit'
hiddenName: undefined

// Editable input
editable: undefined

// Dropdown selectors
selectYears: undefined
selectMonths: undefined

// First day of the week
firstDay: undefined

// Date limits
min: undefined
max: undefined

// Disable dates
disable: undefined

// Root picker container
container: undefined

// Hidden input container
containerHidden: undefined

// Close on a user action
closeOnSelect: true
closeOnClear: true

// Events
onStart: undefined
onRender: undefined
onOpen: undefined
onClose: undefined
onSet: undefined
onStop: undefined

// Classes
klass: {

  // The element states
  input: 'picker__input'
  active: 'picker__input--active'

  // The root picker and states *
  picker: 'picker'
  opened: 'picker--opened'
  focused: 'picker--focused'

  // The picker holder
  holder: 'picker__holder'

  // The picker frame, wrapper, and box
  frame: 'picker__frame'
  wrap: 'picker__wrap'
  box: 'picker__box'

  // The picker header
  header: 'picker__header'

  // Month navigation
  navPrev: 'picker__nav--prev'
  navNext: 'picker__nav--next'
  navDisabled: 'picker__nav--disabled'

  // Month & year labels
  month: 'picker__month'
  year: 'picker__year'

  // Month & year dropdowns
  selectMonth: 'picker__select--month'
  selectYear: 'picker__select--year'

  // Table of dates
  table: 'picker__table'

  // Weekday labels
  weekdays: 'picker__weekday'

  // Day states
  day: 'picker__day'
  disabled: 'picker__day--disabled'
  selected: 'picker__day--selected'
  highlighted: 'picker__day--highlighted'
  now: 'picker__day--today'
  infocus: 'picker__day--infocus'
  outfocus: 'picker__day--outfocus'

  // The picker footer
  footer: 'picker__footer'

  // Today, clear, & close buttons
  buttonClear: 'picker__button--clear'
  buttonClose: 'picker__button--close'
  buttonToday: 'picker__button--today'
}
  
  </script>
   <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>


   
</form>

<div id='ajaxDiv'>Results</div>

Open in new window

0
Kyle HamiltonData ScientistCommented:
All I'm seeing here are a bunch of string configurations. Looks like you copy and pasted it from somewhere?

Where is the functionality? Where is the HTML and CSS to go with it?

Did you look at the code in the link I provided? Have you looked online for other non-jquery examples?
0
Harkin32Author Commented:
I have looked on line for a other examples and look at the code in your link but as I am still trying to learn javascript its a little confusing at the moment is there anyway of doing it with html selection boxes or do you now of any video tutorial as I find I understand it more from watching a video  but so far all I see on youtube is jquery date pickers
0
Kyle HamiltonData ScientistCommented:
This is not a good place to start learning javascript, unless you have a solid grasp of another language. I'm not seeing evidence of that :)

Just use HTML select for this, ex:

<select id="month">
<option value="0">January</option>
....
</select>

Open in new window


You might try to convert the three option values to a Date object that you can submit to your server. That would be a better starting point to start learning.

When you have a better handle on Javascript, then you might attempt an actual date picker.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.