1

I'm trying to validate the order_datePicker input field when it is filled by bootstrap-datepicker. I've already found some answers on stackoverflow but somehow I cant get it to work myself. With the other input fields i'm using: 

$('#order_emailadres').on('input', function() {

However this isnt working for a datepicker input field because the user is not using input.

So, as mentioned in the documentation and stackoverflow link i'm trying to catch the changeDate event so that the input can be validated by the following code:

HTML:

<div id=sandbox-container>
  <div id="datepicker"></div>
    <input type="text" id="order_datePicker" name=order_datePicker>
  </div>
</div>

JS:

$('#order_datePicker').on('changeDate', function () {
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

Sadly this is not working. What am I doing wrong?

Update:

Got it working with the code below but now the class is added to the div instead of the input field. However the original question is answered. Thanks

$('#datepicker').datepicker().on('changeDate',function(){
    $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate'));
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});
Community
  • 1
  • 1
RvdM
  • 95
  • 1
  • 7
  • `$('#order_datePicker').datepicker().on('changeDate',function(){});` this is the one you need to use right? – rrk Feb 23 '16 at 09:39
  • Do you instantiate the `.datepicker()`? – A1rPun Feb 23 '16 at 09:39
  • Yeah I tried that as well. No luck – RvdM Feb 23 '16 at 09:41
  • You know that you don't just try that, it is required! – A1rPun Feb 23 '16 at 09:47
  • There's a question with what you're asking: http://stackoverflow.com/a/17429056/4274373 – Oooogi Feb 23 '16 at 09:51
  • @A1rPun You're right. I was doing that in another part of the script. At this point I got it working however the class is added to the wrong div. It should add itself to the input field but it now adds itself to the div #datepicker. See update in post. – RvdM Feb 23 '16 at 09:56
  • Class is added in input tag..check my snippet – Dhara Feb 23 '16 at 10:12
  • @debin: that does not seem to work with the embedded version – RvdM Feb 23 '16 at 10:25
  • because if u r using ur last snippet then in that u used div id that is `#datepicker`..so `$(this)` will refer div tag instead of input..select input id that is `order_datePicker` as shown in mine.. – Dhara Feb 23 '16 at 10:27

1 Answers1

0

$('#order_datePicker').datepicker();
$('#order_datePicker').change(function() {
  alert("date change");
$('#order_datePicker').datepicker();
$('#order_datePicker').change(function() {
 $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate'));
var input=$(this);
var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
var is_valid=re.test(input.val());
if(is_valid){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<div id=sandbox-container>
  <div id="datepicker"></div>
  <input type="text" id="order_datePicker" name=order_datePicker/>
</div>
</div>

Try, UPDATED

  $("#StateDatePicker").on("dp.change", function(e) { alert(); });
or 
$("#StateDatePicker").change( function(e) { alert(); });

please refer https://eonasdan.github.io/bootstrap-datetimepicker/Events/ for events

Dhara
  • 1,914
  • 2
  • 18
  • 37