CODEWITHSUNDEEP
jquery
Nur Wafiqa
Nur Wafiqa

Reputation: 93

How to add a day from current date in Jquery Datepicker

I want the End Daye to be automatically set one day after the current date. Here is my attempt. But it's not working.

Can someone help me with this? I am currently new in Jquery

<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function() {
            var date = $('#datepicker1').datepicker({
                dateFormat: 'dd-mm-yy'
            }).val();
            var date2 = $('#datepicker2').datepicker({
                dateFormat: 'dd-mm-yy'
            }).val();
            $("#datepicker1").datepicker();
            $("#datepicker2").datepicker();
            $("#datepicker1").datepicker().datepicker("setDate", new Date());
            var date3 = $('#datepicker1').datepicker('getDate');
            date3.setDate(date3.getDate() + 1);
            $('#datepicker2').datepicker('setDate'.date3);
        });
    </script>
    <style>
        div.ui-datepicker {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p>Start Date</p>
    <input type="text" id="datepicker1">
    <p>End Date</p>
    <input type="text" id="datepicker2">
</body>
</html>

Upvotes: 0

Views: 4138

Answers (1)

Stephan
Stephan

Reputation: 43013

Some errors in the posted code:

Multiple jquery definitions

<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>

Either use jquery minified (js/jquery-ui.min.js) or not minified (js/jquery-ui.js). Don't use both in your code.

Syntax error

$('#datepicker2').datepicker('setDate'.date3);

A , is missing here. Replace this line with :

$('#datepicker2').datepicker('setDate', date3);

Try the snippet below with errors removed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<script>
        $(function() {
            var date = $('#datepicker1').datepicker({
                dateFormat: 'dd-mm-yy'
            }).val();
            var date2 = $('#datepicker2').datepicker({
                dateFormat: 'dd-mm-yy'
            }).val();
            $("#datepicker1").datepicker();
            $("#datepicker2").datepicker();
            $("#datepicker1").datepicker().datepicker("setDate", new Date());
            var date3 = $('#datepicker1').datepicker('getDate');
            date3.setDate(date3.getDate() + 1);
            $('#datepicker2').datepicker('setDate',date3);
        });
    </script>
    <style>
        div.ui-datepicker {
            font-size: 10px;
        }
    </style>
    <p>Start Date</p>
    <input type="text" id="datepicker1">
    <p>End Date</p>
    <input type="text" id="datepicker2">

Upvotes: 1

Related Questions