CODEWITHSUNDEEP
javascriptjqueryajaxhtml
user4644565
user4644565

Reputation:

Working with date picker: seemingly simple task

Below is a fiddle example as a starting point: http://jsfiddle.net/1ezos4ho/8/

Essentially I would want the followings to happen:

  1. The date selected to be dynamically be added as the value of the input, where it would be like <input type text value="date selected"....

Update:

<script> 
$(function() { // on load function, everything inside here will not run until the pagehas had time to load 
      $("#dpick").datepicker(); //date picker added here at its state its only able to grab the startDate not the end date not sure why

$('.filter').click(function(){ 

                document.getElementById("results").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";

var datastring = $('#testform').serialize(); // this will create key/value pairs to send to the phph page like `duration5=5` with a `&` separating each key/value pair 
$('#display-datastring').html(datastring); // this line is just so you can see the variable being created 
$.ajax({ 
url: 'fetch_pages.php', 
type: 'post', 
data: datastring, 
success: function(res){ 

$('#results').html(res); 
} 
}); 


}); 

}); 
</script>

Below is the form:

 <form id="testform"> 

            <input type="text"  placeholder="Start" style="width: 40%;" name="dateStart" class="filter" id="dpick" > 
                            <label id="Paylbl0">To</label>

             <input type="text"  style="width: 40%;" placeholder="End" name="dateEnd" class="filter" id="dpick">

problem is function start to run as soon as i hit the input when it should only be executed oncce the date has been selected. For some reason the date picker only comes in action with start date and not end date.

Upvotes: 0

Views: 68

Answers (1)

Mike Barwick
Mike Barwick

Reputation: 5367

Not sure you fully understand how the plug-in works. It'll assign the value. Here's a quick "alert" test I did to show you. Just select a date. It watches for a change to the input and then alerts the date selected - based on the VALUE.

Submit your form (or grab the input value via js, as per my example) and it should work.

http://jsfiddle.net/1ezos4ho/11/

A js example to show you...

var i = 3;

$(function() {
    $(".dpick").datepicker();

    $('.dpick').on('change', function() {
        $val = $(this).val();
        alert($val);
    });
});

Also, make sure you name your inputs if you're submitting them via a form. based on your comment, you're doing a POST request which is looking for those items which haven't been identified.

In short, $_POST['endDate'] is looking for an input with the name, endDate.

<input type="text" name="startDate" placeholder="Start" style="width: 40%;" class="dpick" id="dpick0" >

<input type="text" name="endDate" style="width: 40%;" placeholder="End" class="dpick" id="dpick1">

Upvotes: 0

Related Questions