GabrielVa GabrielVa - 3 months ago 9
Javascript Question

jquery how to show alert based on datetime picker value?

I have a Laravel 4.2 / PHP project that has both a modal that shows at the page load and I have a datetime picker in my form. I would like to have an alert popup if the date is within 30 days or less of the current date. When I try to code something in the datepicker, the modal function goes away and the picker reverts to a normal one. Can someone give me some guidance on how to solve this?

$('#myModal').modal('show');

$('#ApplicationDeadline').datepicker({
startDate: '1d',
endDate: '+365d',
\\ code for alert goes here I assume? When I put code here it breaks the modal

});


@if($Modal)
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">External Grant</h4>
</div>
<div class="modal-body">
<p>The External Grant Pro Application needs to be discussed with Grant Administrator before submitting an application. </p>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary btn-lg pull-right" data-dismiss="modal">OK, Let's Begin</button>
</div>
</div>
</div>
</div>
@endif

{{ HTML::col(6,6,6,6) }}
{{ Form::formGroup() }}
{{ Form::label('ApplicationDeadline', 'Application Deadline Date') }}
{{ Form::date('ApplicationDeadline', '', array('class' => 'form-control')) }}
{{ Form::closeFormGroup() }}
{{ HTML::closeCol() }}

Answer

Your function needs to be called as the callback for an event listener. If you want to specify a change event callback in the datepicker object, you'd have to consult the API. Otherwise, just a plain event listener is fine using jQuery.

Using jQuery:

<script>
...
    $(function() {
        $('#ApplicationDeadline').on('change', function(){
           // datediff / alert code here
        });
    });    
...
</script>
Comments