search

Mds92 / MD.BootstrapPersianDateTimePicker

Bootstrap Persian/Gregorian Date Time Picker
347 stars 105 forks source link

نحوه نمایش دادن دو عدد DatePicker #269

Closed miladahmadi33 closed 1 year ago

miladahmadi33 commented 1 year ago

من موقعی که از دو تا DatePicker استفاده میکنم، برای اولین تقویم تاریخ انتخاب میکنم، اما به محض انتخاب تاریخ برای تقویم دوم دچار این خطا میشم

mds.bs.datetimepicker.ts:1754 Uncaught TypeError: Cannot read properties of null (reading 'setting')
    at e.selectDay (mds.bs.datetimepicker.ts:1754:18)
    at HTMLDocument.selectCorrectClickEvent (mds.bs.datetimepicker.ts:2009:12)

روی خطا کلیک میکنم وارد این قسمت از کد میشه.

// کلیک روی روزها
// انتخاب روز
لاین 1754

ممنون میشم راهنمایی کنید به چه صورت میشه از دو تقویم در یک صفحه استفاده کرد. این از کدی که استفاده کردم :

<div class="container">
    <div class="row mt-5">
        <input id="test" class="form-control" />
        <input id="test2" class="form-control" />
    </div>
</div>
$(function () {
    const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('test'), {
        targetTextSelector: '#test'
    });

    const dtp2Instance = new mds.MdsPersianDateTimePicker(document.getElementById('test2'), {
        targetTextSelector: '#test2'
    });
})
Mds92 commented 1 year ago

سلام لطفا نمونه کدی اینجا قرار بدید تا سریع تر بشه به خطای مد نظر شما رسید تشکر

miladahmadi33 commented 1 year ago 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/md.bootstrappersiandatetimepicker/dist/mds.bs.datetimepicker.style.min.css">
</head>

<body>

    <div class="container">
        <div class="row mt-5">
            <div class="my-2">
                <label>First picker</label>
                <input id="test" class="form-control" />
            </div>
            <div class="my-2">
                <label>Second picker</label>
                <input id="test2" class="form-control" />
            </div>
        </div>
    </div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="lib/md.bootstrappersiandatetimepicker/dist/mds.bs.datetimepicker.js"></script>
    <script>
        $(function () {
            const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById('test'), {
                targetTextSelector: '#test'
            });

            const dtp2Instance = new mds.MdsPersianDateTimePicker(document.getElementById('test2'), {
                targetTextSelector: '#test2'
            });
        })
    </script>
</body>

</html>

این کل کلی کدی هست که استفاده میکنم. برای یکی از تقویم ها تاریخ انتخاب میکنم، اما به محض انتخاب تاریخ برای تقویم دوم، دچار خطایی میشم که در پیام اول فرستادم. ربطی به اول کدوم رو انتخاب میکنم نداره، برای مثال اول برای تقویم دوم تاریخ انتخاب کنم بعد برای تقویم اول تاریخ انتخاب کنم، باز هم این error هست. آیا کسی تا به حال حین استفاده کردن از مثبت یک تقویم در صفحه به مشکل نخورده ؟ تاکید میکنم داشتن دو تقویم در صفحه مشکل نداره، به محض انتخاب تاریخ خطا به وجود میاد. میشه لطفا یک Sample code، از نحوه استفاده دو تقویم در یک صفحه رو که خودتون تستش کردید برام بفرستید.

Mds92 commented 1 year ago

من کد شما را تست کردم در ورژن آخر یعنی 4.2.0 برخی مشکلات حل شده با آخرین نسخه تست کردم و مشکلی ندیدم اما نکته ای که باید بگم اینه که باید حتما فایل css این متابخانه بعد از فایل css بوت استرپ قرار بگیره در غیر اینصورت صحیح نمایش داده نمیشه کد شما این مشکل را داشت

miladahmadi33 commented 1 year ago

منم بعد از فایلِ css بوت استرپ لودش کردم. لطف میکنید یک Sample code از نحوه قرار گیری مثبت یک Picker در یک صفحه قرار بدید. ممنون میشم.

Mds92 commented 1 year ago

هم تو readme (توضیحات صفحه نخست) هست و هم میتونید تو دمو inspect کنید و نحوه چینش رو ببینید

miladahmadi33 commented 1 year ago

خیلی ممنون از اینکه وقت میذارید. جناب جسارت نباشه ولی تو این دو صفحه که گفتید، از دوتا picker کنار هم استفاده نکردید. صفحه دمو فقط یه دونه picker داره. من میخوام از دوتا picker در یک صفحه استفاده کنم ولی موقعی که تاریخ اول انتخاب شده و برای دومی تاریخ انتخاب میکنم در console بهم خطا میده. متن خطا هم در اولین متنی که فرستادم هست. باز هم ممنون که وقت میذارید.

Mds92 commented 1 year ago

من دقیقا کد خود شما را بررسی کردم فقط کاری که کردم از نسخه های آنلاین بوت استرپ و جی کوئری استفاده کردم و خطایی ندیدم و البته css بوت استرپ را قبل از css کتابخانه دیت پیکر قرار دادم

miladahmadi33 commented 1 year ago

تست کردم، بدون مشکل کار کرد. ممنون ازتون واقعا نمیدونم چند روز پیش چرا کار نمیکرد. ممنون از اینکه وقت گذاشتید. آرزوی سلامتی.