logo
down
shadow

jQuery Date Picker - changing the date relative to each other


jQuery Date Picker - changing the date relative to each other

By : soccer_programmer
Date : November 21 2020, 11:01 PM
With these it helps The thing is that maxDate is set on load as "today" +14.
You have to calculate 14 days + the picked date...
code :
$( function valgavdato() {
    var dateFormat = "mm/dd/yy",
        to_MaxDate = 14;    // From date + this = to maxDate

        from = $( "#fra" )
    .datepicker({
        minDate: '0+',
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
    })
    .on( "change", function() {
        var PickedDate = getDate( this );
        // See that date is in UTC format.
        console.log( "From DatePicker: "+JSON.stringify(PickedDate) );
        
        // Process the picked date.
        var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date.
        var tempMonth = PickedDate.getMonth() + 1;   // Because months are zero based.
        var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based
        console.log( "Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it.");

        // Create a date object in a UTC format.
        var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 23, 59, 59));
        console.log(  "New max date: : "+ JSON.stringify(newMaxDate) );

        // Set the minDate ans maxDate options.  
        to.datepicker( "option", {"minDate": PickedDate, "maxDate": newMaxDate});

    }),
        to = $( "#til" ).datepicker({
            maxDate: '14+',
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1
        })
    .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
    });

    function getDate( element ) {
        var date;
        try {
            date = $.datepicker.parseDate( dateFormat, element.value );
        } catch( error ) {
            date = null;
        }

        return date;
    }
} );
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>



<input type="text" id="fra"><br>
<br>
<input type="text" id="til">


Share : facebook icon twitter icon
How to change date format of a jQuery Date Picker plugin (Jonathan Leighton Input Date)

How to change date format of a jQuery Date Picker plugin (Jonathan Leighton Input Date)


By : Mo'men Mohamed
Date : March 29 2020, 07:55 AM
may help you . The very page you linked to has an example how to format the date in YYYY-MM-DD:
http://jonathanleighton.com/projects/date-input#date-formatting
jQuery UI date picker - updating another date picker on selecting a date

jQuery UI date picker - updating another date picker on selecting a date


By : Usui Kenta
Date : March 29 2020, 07:55 AM
hope this fix your issue The date picker is essentially a text input element. You can use the jquery change handler on the first input element to grab its contents when they change, then simply select the second input element and update the value using jquery val.
http://api.jquery.com/change/ http://api.jquery.com/val/
code :
$("#firstdatepicker").change(  function() {
   $("#seconddatepicker").val($(this).val());
});
how to restrict user to select only two days back date as well current date in date picker jquery mobile

how to restrict user to select only two days back date as well current date in date picker jquery mobile


By : trayer
Date : March 29 2020, 07:55 AM
With these it helps You need to configure the minDate attribute for the datepicker config object like this:
code :
var d = new Date();
d.setDate(d.getDate()-2);

$('#date1').datepick({dateFormat: 'dd-mm-yyyy', minDate: d});
var date1= $("#date1").val(); 
**html code is**
<input type="text" id="date1" name="date" placeholder="Date"/>
Calling radio button (click event) on changing date of jquery date picker not working

Calling radio button (click event) on changing date of jquery date picker not working


By : Novus3013
Date : March 29 2020, 07:55 AM
seems to work fine Since it's dynamically added , you need to use event delegation
code :
$(document).ready(function () {
    $('#showavialabletime').on('change','input[name=datetime]', function() {
       var date=$('input[name=datetime]:checked').val(); 
       alert(date);
    });
});
ng2-date-picker: node_modules/ng2-date-picker/ng2-date-picker.d.ts, found version 4, expected 3, resolving symbol Naviga

ng2-date-picker: node_modules/ng2-date-picker/ng2-date-picker.d.ts, found version 4, expected 3, resolving symbol Naviga


By : user1528775
Date : March 29 2020, 07:55 AM
I wish this helpful for you The solution that fixed my problem is getting rid of the ^ in ng2-date-picker version in package.json
Replacing "ng2-date-picker": "^2.8.1" to "ng2-date-picker": "2.8.1" fixed the error.
Related Posts Related Posts :
  • add- and removeClass on hover with jQuery
  • How do I repeat JQuery Counter when timer finished
  • how to loop through higher order function?
  • How to disable past dates in Bootstrap datetimepicker after set check in date
  • Data Table customising pdf
  • How to set smooth transition of the carousel when reached to end in Slick Carousel?
  • Change scroll speed for specific section and/or button click (SCROLLIFY)
  • Dynamic custom filter not working in codeigniter
  • Show and hide a div in safari using vue js issue
  • Link to another page, scrolled to a div anchor
  • Passing a variable to init function (variable scope issue)
  • Is it bad practice to stack animations on top of each other?
  • Chrome weird (scaleY) transition behaviour
  • How to have a submit button outside of a form with jquery .on()
  • Change CSS display on windows resize and toggle
  • jQuery getJSON content in new div
  • How to change CSS with jQuery change and this
  • Trying to use appendTo() to push dives to one part of a page, after a first appendTo() is done.
  • Hiding other menu-items when hovering over one - messes with my css-transitions
  • Using button to reset value in a table
  • Value name of select option used as number in function
  • WebDriverException: Unexpected token ':'. Expected ')' to end a argument list when using jQuery :contains with Selenium
  • recieve data in conroller but not showing in kendo grid
  • Have header fade out then in after appending class
  • Jquery Object array accessing in $.each loop
  • Show different color when click on bootstrap accordion
  • TinyMCE inline editor will not appear / classic menu will not work
  • How to readOnly or cancel changeDate event on Bootstrap-datepicker
  • How Count Chracters in WordPress Visual Editor
  • how to trigger a event on clicking dynamically created checkboxes of same group
  • Jquery: random background color
  • How to print the data returning from $.post()?
  • Refactoring js for multiple menus that are not siblings
  • How do I use JQuery to change one html attribute's value to equal a different attribute's value?
  • $('#id').load(function(){}); not working
  • Free jqGrid TreeGrid - Unload Data
  • Appending multiple elements to html
  • How can I validate text boxes to prevent passing empty values?
  • Datepicker enable all date
  • Prevent div overlapping in position:absolute div
  • Attribute returns Undefined in Table
  • datatable sorting on string as number
  • Styling WordPress Contact Form 7 differently depending on page
  • Load button on .hover() but dynamically for each child element
  • jquery select from inserted html
  • jquery find text of nearest span with a certain class
  • Randomly Changing Images from an Array of Images
  • Unsure how to assign JSON object to a url
  • Jquery Sticky side bar won't stick to bottom of website
  • jQuery: Turn off delegated events from original object, with namespace
  • Listen out for end of video, display video in JQuery & Revolution Slider
  • jQuery `children` versus ` find`
  • jQuery hide/show different elements troubleshooting
  • Mvc 4 JsonResult not returning anything
  • Remove scroll bar in my template
  • Select on name in object
  • How to check DropDownlist is null or not in mvc using Jquery
  • Sending form data to DataTables ajax call
  • jquery-validation-unobtrusive: Display Different Error Messages in Summary and Label
  • Highlight the first value of dropdown list
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com