Question

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 1

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>

jquery how to show alert based on datetime picker value?

1 个答案: