Home Forums Porto Template Modal Datepicker

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 2 months, 3 weeks ago. This post has been viewed 148 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10027419

    Sascha_Khan
    Participant

    Hi *,

    I’m trying to get a date by a modal datepicker. This is my code:

    <div class="modal fade" id="wiedervorlageModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    										<div class="modal-dialog modal-sm">
    											<div class="modal-content">
    												<div class="modal-header align-left">
    													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    													<h4 class="modal-title" id="smallModalLabel">Wiedervorlagetermin</h4>
    												</div>
    												<div class="modal-body">
    													<div data-plugin-datepicker data-plugin-options='{"language": "de"}' data-plugin-skin="primary">
    												</div>
    												<div class="modal-footer align-center">
    													<button type="button" class="btn btn-info">&uuml;bernehmen</button>
    												</div>
    											</div>
    										</div>
    									</div>

    and

    $('.custom-open-modal').on('click', function(){
    	$('#wiedervorlageModal').modal('show');
    });

    How can I get the selected date to my server side php script?

    Thank you.

    Sascha


    #10027423

    Support2
    Keymaster

    Hello Sascha,

    Choose one of the methods explained below:

    1) Use the datepicker as input inside a form, for example:

    <form action="myscript.php" method="post">
        <input name="datepicker" data-plugin-datepicker data-plugin-options='{"language": "de"}' data-plugin-skin="primary">
    </form>

    2) Get the value with javascript and AJAX request to the PHP script:
    HTML:

    <div data-plugin-datepicker data-plugin-options='{"language": "de"}' data-plugin-skin="primary"></div>

    JS:

    $('.custom-send-button').on('click', function(){
    	$.ajax({
    		url: '/path/to/file.php',
    		type: 'post',
    		data: {
    			datepicker_value: $('#my-datepicker').bootstrapDP('getFormattedDate')
    		}
    	})
    	.done(function() {
    		console.log("success");
    	})
    	.fail(function() {
    		console.log("error");
    	})
    	.always(function() {
    		console.log("complete");
    	});
    });

    Hope it helps.

    Kind Regards,

    Rodrigo.


    #10027424

    Sascha_Khan
    Participant

    Hello Rodrigo,

    in the context with datepicker and modal dialog your solution does not work.

    I need another solution.

    Thank you.

    Best regards

    Sascha


    #10027429

    Support2
    Keymaster

    Hello Sascha,

    The solutions works with modal.
    For the first you can try like this:

    <div class="modal fade" id="wiedervorlageModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    	<form class="modal-dialog modal-sm" action="myscript.php" method="get">
    		<div class="modal-content">
    			<div class="modal-header align-left">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    				<h4 class="modal-title" id="smallModalLabel">Wiedervorlagetermin</h4>
    			</div>
    			<div class="modal-body">
    				<input name="datepicker" data-plugin-datepicker data-plugin-options='{"language": "de"}' data-plugin-skin="primary">
    			</div>
    			<div class="modal-footer align-center">
    				<button type="submit" class="btn btn-info">&uuml;bernehmen</button>
    			</div>
    		</div>
    	</form>
    </div>

    And for the second method:

    <div class="modal fade" id="wiedervorlageModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content">
    			<div class="modal-header align-left">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    				<h4 class="modal-title" id="smallModalLabel">Wiedervorlagetermin</h4>
    			</div>
    			<div class="modal-body">
    				<div id="my-datepicker" data-plugin-datepicker data-plugin-options='{"language": "de"}' data-plugin-skin="primary"></div>
    			</div>
    			<div class="modal-footer align-center">
    				<button type="submit" class="btn btn-info custom-send-button">&uuml;bernehmen</button>
    			</div>
    		</div>
    	</div>
    </div>

    Hope it helps.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)