How do i increase 120 days in datepicker dropdown?

Question

I have two date picker dropdown and if i pick Jan 01,2020 and my Due date datepicker should automatically increment the 120 days and set the Due date as 04-30-2020 (Apr 30, 2020). How can i achieve this and it needs to work on all timezone and DST supported? We are not allowed to use any datetime library for this :(. Thanks in advance for your help.

// INCLUDE JQUERY & JQUERY UI 1.12.1

$( function() {
    $( "#datepicker" ).datepicker({
        dateFormat: "dd-mm-yy"
        ,   duration: "fast"
    });
    $( "#datepicker2" ).datepicker({
        dateFormat: "dd-mm-yy"
        ,   duration: "fast"
    });
} );

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    color: #546E7A;
}
.wrapper {
    max-width: 18rem;
    padding: 0 0.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4rem;
}
label {
    font-size: 0.75rem;
    font-weight: 400;
    display: block;
    margin-bottom: 0.5rem;
    color: #B0BEC5;
    border: 1px solid #ECEFF1;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}
input {
    font-family: 'Roboto', sans-serif;
    display:block;
    border: none;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    line-height: 1.5rem;
    padding: 0;
    font-size: 1rem;
    color: #607D8B;
    width: 100%;
    margin-top: 0.5rem;
}
input:focus {outline: none;}
#ui-datepicker-div {
    display: none;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #78909C;
}
.ui-datepicker-calendar tbody td {
    width: 2.5rem;
    text-align: center;
    padding: 0;
}
.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 2rem;
    transition: 0.3s all;
    color: #546E7A;
    font-size: 0.875rem;
    text-decoration: none;
}
.ui-datepicker-calendar tbody td a:hover {  
    background-color: #E0F2F1;
}
.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #009688;
    color: white;
}
.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}
.ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1;
}
.ui-datepicker-header a.ui-datepicker-prev {    
    left: 0;    
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: 50%;
    transform: rotate(180deg);
}
.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 50%;
}
.ui-datepicker-header a>span {
    display: none;
}
.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
}
.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<div class="wrapper">
    <label for="datepicker">Start Date
        <input type="date" id="datepicker" autocomplete="off">
    </label>    
        <label for="datepicker">Due Date
        <input type="date" id="datepicker2" autocomplete="off">
    </label>    

</div>
<div><p></div>

You do know that in html 5 browsers will show a date pop up on click, right? And that type="time" and type="datetime" will likewise show controls for these? — ControlAltDel, Oct 28 '20 at 19:04
@ControlAltDel i just changed to HTML5 datetime picker instead of jquery one. thank you ! Can you please help me how can i set the due date as 120 days ahead of currently selected date? — JSBeginner, Oct 28 '20 at 19:08
I hesitate to recommend that you delete this question, as I have been too quick to recommend this to other inexperienced users. But if my suggestion takes care of your problem, you might want to think about deleting this post because the problem is solved, but the original question is not answered. — ControlAltDel, Oct 28 '20 at 19:13
Does this answer your question? [Adding days to given date in jQuery](https://stackoverflow.com/questions/23854154/adding-days-to-given-date-in-jquery) — devlin carnate, Oct 28 '20 at 19:15
@ControlAltDel my problem is not yet resolved. I need to setup 120 days ahead on Due Date.How can i do that? Kindly advise. — JSBeginner, Oct 28 '20 at 19:21

score 0 · Accepted Answer · answered Oct 28 '20 at 20:27

0

Given a date field:

<input id="dt" type="date" />

Set it to 120 days from now:

var date = new Date();
date.setDate(date.getDate() + 120);
document.getElementById("dt").value = date;

answered Oct 28 '20 at 20:27

ControlAltDel

33,923
10
53
80

How do i increase 120 days in datepicker dropdown?

1 Answers1