search

majidh1 / JalaliDatePicker

A lightweight and simple jalali datepicker. powerful javascript datepicker with no dependencies
https://majidh1.github.io/JalaliDatePicker/
MIT License
420 stars 65 forks source link

How to get the date difference between two jalali date on clicking the second input date picker? #114

Closed saeedsol1 closed 4 weeks ago

saeedsol1 commented 4 weeks ago

How to get the date difference between two jalali date on clicking the second input date picker? تفاوت دو تاریخ رو چگونه میشه به دست آورد مثلا: date1= 1403/06/06 date2= 1403/06/06 result: 1 day

date1= 1403/06/06 date2= 1403/06/07 result: 2 day

majidh1 commented 4 weeks ago

این سوال مربوط به دیتپیکر نیست ولی یه نمونه واستون میزارم

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jalali Date Difference</title>
    <script src="https://unpkg.com/jalaali-js/dist/jalaali.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css">
    <script type="text/javascript" src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js">
</head>
<body>
    <label for="date1">Date 1 (yyyy/mm/dd):</label>
    <input type="text" id="date1" data-jdp placeholder="1403/06/06"><br><br>

    <label for="date2">Date 2 (yyyy/mm/dd):</label>
    <input type="text" id="date2" data-jdp placeholder="1403/06/07"><br><br>

    <button onclick="calculateDifference()">Get Difference</button>

    <p id="result"></p>

    <script>
        function calculateDifference() {
            // Get the input dates
            var date1 = document.getElementById('date1').value;
            var date2 = document.getElementById('date2').value;

            // Convert the Jalali dates to an array [year, month, day]
            var date1Array = date1.split('/');
            var date2Array = date2.split('/');

            // Convert Jalali dates to Gregorian
            var gDate1 = jalaali.toGregorian(parseInt(date1Array[0]), parseInt(date1Array[1]), parseInt(date1Array[2]));
            var gDate2 = jalaali.toGregorian(parseInt(date2Array[0]), parseInt(date2Array[1]), parseInt(date2Array[2]));

            // Create JavaScript Date objects from the Gregorian dates
            var d1 = new Date(gDate1.gy, gDate1.gm - 1, gDate1.gd);  // Months are 0-indexed in JS
            var d2 = new Date(gDate2.gy, gDate2.gm - 1, gDate2.gd);

            // Calculate the difference in time (milliseconds)
            var timeDifference = Math.abs(d2 - d1);

            // Convert time difference from milliseconds to days
            var dayDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));

            // Show the result
            document.getElementById('result').innerText = dayDifference + ' day(s)';
        }
    </script>
</head><body>
    <label for="date1">Date 1 (yyyy/mm/dd):</label>
    <input type="text" id="date1" data-jdp="" placeholder="1403/06/06"><br><br>

    <label for="date2">Date 2 (yyyy/mm/dd):</label>
    <input type="text" id="date2" data-jdp="" placeholder="1403/06/07"><br><br>

    <button onclick="calculateDifference()">Get Difference</button>

    <p id="result">1 day(s)</p>

    <script>
    jalaliDatepicker.startWatch();
        function calculateDifference() {
            // Get the input dates
            var date1 = document.getElementById('date1').value;
            var date2 = document.getElementById('date2').value;

            // Convert the Jalali dates to an array [year, month, day]
            var date1Array = date1.split('/');
            var date2Array = date2.split('/');

            // Convert Jalali dates to Gregorian
            var gDate1 = jalaali.toGregorian(parseInt(date1Array[0]), parseInt(date1Array[1]), parseInt(date1Array[2]));
            var gDate2 = jalaali.toGregorian(parseInt(date2Array[0]), parseInt(date2Array[1]), parseInt(date2Array[2]));

            // Create JavaScript Date objects from the Gregorian dates
            var d1 = new Date(gDate1.gy, gDate1.gm - 1, gDate1.gd);  // Months are 0-indexed in JS
            var d2 = new Date(gDate2.gy, gDate2.gm - 1, gDate2.gd);

            // Calculate the difference in time (milliseconds)
            var timeDifference = Math.abs(d2 - d1);

            // Convert time difference from milliseconds to days
            var dayDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));

            // Show the result
            document.getElementById('result').innerText = dayDifference + ' day(s)';
        }
    </script>
</body></html>
saeedsol1 commented 4 weeks ago

سلام سپاسگذارم مهندس جان تا حدودی در رابطه با پرسش من است ولی 1- نمیشه بدون کلیک نتیجه رو به دست آورد بدون دکمه 2- و اینکه از تاریخ امروز و امروز باید یک روز محاسبه بشه مثلا تاریخ اول 1403/07/04 و همچنین تاریخ دوم هم 1403/07/04 باید یک روز محاسبه بکنه یعنی +1 باید اعمال بشه مثل مرخصی

majidh1 commented 4 weeks ago

با کمی تغییر کد میتونید اینکارو انجام بدین

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jalali Date Difference</title>
    <script src="https://unpkg.com/jalaali-js/dist/jalaali.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css">
    <script type="text/javascript" src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>
</head>
<body>
    <label for="date1">Date 1 (yyyy/mm/dd):</label>
    <input type="text" id="date1" data-jdp placeholder="1403/06/06"><br><br>

    <label for="date2">Date 2 (yyyy/mm/dd):</label>
    <input type="text" id="date2" data-jdp placeholder="1403/06/07"><br><br>

    <p id="result">Difference: </p>

    <script>
        jalaliDatepicker.startWatch();

        function calculateDifference() {
            // Get the input dates
            var date1 = document.getElementById('date1').value;
            var date2 = document.getElementById('date2').value;

            if (!date1 || !date2) return;

            // Convert the Jalali dates to an array [year, month, day]
            var date1Array = date1.split('/');
            var date2Array = date2.split('/');

            // Convert Jalali dates to Gregorian
            var gDate1 = jalaali.toGregorian(parseInt(date1Array[0]), parseInt(date1Array[1]), parseInt(date1Array[2]));
            var gDate2 = jalaali.toGregorian(parseInt(date2Array[0]), parseInt(date2Array[1]), parseInt(date2Array[2]));

            // Create JavaScript Date objects from the Gregorian dates
            var d1 = new Date(gDate1.gy, gDate1.gm - 1, gDate1.gd);  // Months are 0-indexed in JS
            var d2 = new Date(gDate2.gy, gDate2.gm - 1, gDate2.gd);

            // Calculate the difference in time (milliseconds)
            var timeDifference = Math.abs(d2 - d1);

            // Convert time difference from milliseconds to days and add 1 to include both start and end dates
            var dayDifference = Math.floor(timeDifference / (1000 * 3600 * 24)) + 1;

            // Show the result
            document.getElementById('result').innerText = dayDifference + ' day(s)';
        }

        // Add event listeners for automatic calculation
        document.getElementById('date1').addEventListener('change', calculateDifference);
        document.getElementById('date2').addEventListener('change', calculateDifference);
    </script>
</body>
</html>
saeedsol1 commented 4 weeks ago

سپاس از مهندس عزیز درست همونی است که می خواستم راه حلش همین بود سپاسگذارم