Home Forums Porto Admin Template Daterange toDate for 1year

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10031017
    xlinkinfocom
    Participant

    I have used daterange in my AMC form. I want when user will select fromDate (suppose, 09/28/2019) and toDate will be focus on 365 days date (08/28/2020)

    User are free to change the daterange i.e. it will not fixed for 365 days. It will not be locked.

    How to solve this ?


    #10031021
    xlinkinfocom
    Participant

    Hi, I am still waiting for the solution. Please help.


    #10031023
    Support
    Keymaster

    Hello, thanks for your purchase and sorry for the delay in responding.

    Here’s an example on how to do that:

    HTML:

    <div class="form-group row">
    	<label class="col-lg-3 control-label text-lg-right pt-2">Date range</label>
    	<div class="col-lg-6">
    		<div class="input-daterange input-group">
    			<span class="input-group-prepend">
    				<span class="input-group-text">
    					<i class="fas fa-calendar-alt"></i>
    				</span>
    			</span>
    			<input type="text" class="form-control" name="start" id="dpStart">
    			<span class="input-group-text border-left-0 border-right-0 rounded-0">
    				to
    			</span>
    			<input type="text" class="form-control" name="end" id="dpEnd">
    		</div>
    	</div>
    </div>

    JS:
    (js/custom.js)

    (function($) {
    
    	'use strict';
    
    	if ( $.isFunction($.fn[ 'bootstrapDP' ]) ) {
    
    		$(function() {
    			
    			$('#dpStart').bootstrapDP().on('changeDate', function(e) {
    				
    				var endDate = new Date(e.date);
    				endDate.setFullYear(endDate.getFullYear() + 1);
    				
    				$('#dpEnd').bootstrapDP('update', endDate);
    				
    			});
    			
    			$('#dpEnd').bootstrapDP();
    
    			
    		});
    
    	}
    
    }).apply(this, [jQuery]);

    You can see the plugin documentation in this link:
    https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html

    But note that the plugin was changed to avoid conflicts with jQueryUI.

    So where it is: .datepicker() in the documentation you need to use .bootstrapDP()

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    #10031038
    xlinkinfocom
    Participant

    Hi, Thanks a lot for your support.

    https://cl1p.net/vzcmqnghos

    This code (Code is in above link) was worked with previous bootstrap and not working with latest bootstrap


    #10031049
    Support2
    Keymaster

    Hello,

    Unfortunately the link you provided is empty:

    We await a new link with your code to proceed with this ticket.

    Kind Regards,

    Rodrigo.


    #10031066
    xlinkinfocom
    Participant

    Hi, sorry ..my mistake.

    Check-in and Check-out with auto focus on Checkout date field added with 365 days
    Please check this link https://www.codepile.net/pile/LNL4arNl


    #10031073
    Support2
    Keymaster

    Hello,

    Try with this code:

    $(document).ready(function() {
    	
    		
    	//var nowTemp = new Date();
    	//var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    	var now = new Date();
    
    	//alert(now);
    	var checkin = $('#dpStart').bootstrapDP({
    
    	    /*beforeShowDay: function (date) {
    	        return date.valueOf() >= now.valueOf();
    	    },*/
    	    autoclose: true
    
    	}).on('changeDate', function (ev) {
    	    if( $('#dpEnd').bootstrapDP("getDate") ) {
    		    if (ev.date.valueOf() > $('#dpEnd').bootstrapDP("getDate").valueOf() || !$('#dpEnd').bootstrapDP("getDate").valueOf()) {
    		        var newDate = new Date(ev.date);
    		        newDate.setDate(newDate.getDate() + 365);
    		        $('#dpEnd').bootstrapDP("update", newDate);
    
    		    }
    		}
    	    $('#dpEnd').focus();
    	});
    
    
    	var checkout = $('#dpEnd').bootstrapDP({
    	    beforeShowDay: function (date) {
    	        if (!$('#dpStart').bootstrapDP("getDate").valueOf()) {
    	            return date.valueOf() >= new Date().valueOf();
    	        } else {
    	            return date.valueOf() > $('#dpStart').bootstrapDP("getDate").valueOf();
    	        }
    	    },
    	    autoclose: true
    
    	}).on('changeDate', function (ev) {});
     });

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031098
    xlinkinfocom
    Participant

    Hi, thanks for your support.

    How to achieve “Predefined Date Ranges”. Please refer below URL for better understanding (Pls see red bordered section in this image).

    http://prntscr.com/prmmqi

    Thanks in advance


    #10031114
    Support2
    Keymaster

    Hello,

    Unfortunately the template don’t comes with this exactly type of DataRange Picker.

    By the image you sent this is the “Date Range Picker” plugin. Our suggestion is use this plugin instead of Bootstrap Datepicker that comes with the template.

    Here is the link where you can download and read the documentation about how to integrate/initialize:
    https://www.daterangepicker.com/

    We hope this helps.

    Let us know if you have more questions.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month, 1 week ago by Support2.
    • This reply was modified 1 month, 1 week ago by Support2.
Viewing 9 posts - 1 through 9 (of 9 total)