CODEWITHSUNDEEP
javascriptdatepicker
RL Golla
RL Golla

Reputation: 31

Display Div on JQuery Datepicker (Text Field) value selection

I am having trouble getting the right div to display when someone makes a datepicker selection. I noticed when I remove 'readonly' and disable the datepicker, then manually type in the date (In this case 'Friday, 18 December, 2015') it works. But when 'readonly' is enabled and you use the datepicker function to select the date, nothing happens. I need the divs to have the ability to change back and forth depending on which date is selected.

BONUS! I would like to be able to add multiple dates to the java code. However, when I tried this.value == "Friday, 18 December, 2015", "Saturday, 19 December, 2015" it triggers the javascript no matter what the input is.

Link - http://jsfiddle.net/u893btef/2/

HTML

<label><strong>Delivery Date</strong></label>
<input type="text" id="datepicker" name="Datepicker1" style="border-radius:5px; font-family: 'PJFont', sans-serif; color:#333; font-size:14px; margin-bottom:-5px;">
<br>

<div id="Datepicker1_hidden_div1" style="display: block;">
  <label><strong>Delivery Time</strong></label>
  <select name="ChooseTime1" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px">
    <option selected="selected">Please Select</option>
    <option>All other options</option>
  </select>
</div>

<div id="Datepicker1_hidden_div2" style="display: none;">
  <label><strong>Delivery Time</strong></label>
  <select name="ChooseTime1" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px">
    <option selected="selected">Please Select</option>
    <option>Dec 18th Options</option>
  </select>
</div>

JAVA

 /* Time Select */
 document.getElementById('datepicker').addEventListener('change', function() {
   if (this.value == "Friday, 18 December, 2015") {
     document.getElementById("Datepicker1_hidden_div2").style.display = "block",
       document.getElementById("Datepicker1_hidden_div1").style.display = "none";
   } else {
     document.getElementById("Datepicker1_hidden_div1").style.display = "block",
       document.getElementById("Datepicker1_hidden_div2").style.display = "none";
   }
 });
 /* Datepicker 1 */
 $(function() {
   var array = ["Saturday, 12 December, 2015", "Saturday, 19 December, 2015"]
   $("#datepicker").datepicker({
     minDate: 3,
     maxDate: 180,
     dateFormat: "DD, d MM, yy",
     changeMonth: true,
     showButtonPanel: true,
     beforeShowDay: function(date) {
       var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
       return [array.indexOf(string) == -1]
     }
   });
 });

Upvotes: 2

Views: 754

Answers (2)

RL Golla
RL Golla

Reputation: 31

Solved It

 /* Datepicker 1 */
 $(function() {
   var array = ["Saturday, 12 December, 2015", "Saturday, 19 December, 2015"]
   $("#datepicker").datepicker({
     minDate: 3,
     maxDate: 180,
     dateFormat: "DD, d MM, yy",
     changeMonth: true,
     showButtonPanel: true,
     beforeShowDay: function(date) {
       var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
       return [array.indexOf(string) == -1]
     }
   }).on("change", function() {
    if (this.value == "Friday, 18 December, 2015") {
     document.getElementById("Datepicker1_hidden_div2").style.display = "block",
       document.getElementById("Datepicker1_hidden_div1").style.display = "none";
   } else {
     document.getElementById("Datepicker1_hidden_div1").style.display = "block",
       document.getElementById("Datepicker1_hidden_div2").style.display = "none";
   };
  });
 });

Upvotes: 1

Ahmad Asjad
Ahmad Asjad

Reputation: 823

When you enabled readonly true, you can't use it as selection. So I have given an ulternate option, if you don't like that any user can type, just input via datepicker.

You can find the same jsfiddle here: https://jsfiddle.net/rg659f4a/

Here is the code.

window.onload = function () {
        document.getElementById('datepicker').addEventListener('change', function () {
            if (this.value == "Friday, 18 December, 2015") {
                document.getElementById("Datepicker1_hidden_div2").style.display = "block",
                        document.getElementById("Datepicker1_hidden_div1").style.display = "none";
            } else {
                document.getElementById("Datepicker1_hidden_div1").style.display = "block",
                        document.getElementById("Datepicker1_hidden_div2").style.display = "none";
            }
        });
    }
    $(document).ready(function(){
        alert('hi');
        $('#datepicker').keyup(function(e){
                $(this).val('');
        });
    });
    $(function() {
    $( "#datepicker" ).datepicker();
  });

Upvotes: 0

Related Questions