2 dates in one page

[Albehairy]

Hi, I am trying to put two dates on the same page.

the issue is that when I pick the date in the second one it has been inserted in the first field.

I need to insert the start date and the end date as well so, I need two date pickers but I don't know which variable should be changed.

I would appreciate it if you can view my code and help me with this.

thanks in advance

the Code:

Start Date:

                <div id="datepicker"></div>
                <link rel="stylesheet" href="{{ asset('js/w3css/w3.css') }}"/>
                <script type="text/javascript" src="{{ asset('js/HijriDate.js/hijri-date.js') }}"></script>
                <script type="text/javascript" src="{{ asset('js/Datepicker.js/datepicker.js') }}"></script>
                <div class="w3-container w3-margin-top">
                    <div class="w3-container w3-margin-top">
                        <label for="StartDateG">Gregorian Date</label>
                        <input id="StartDateG" name="StartDateG" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
                    </div>
                    <div class="w3-container w3-margin-top">
                        <label for="StartDateH">Hijri Date</label>
                        <input id="StartDateH" name="StartDateH" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
                    </div>
                </div>
                <script type="text/javascript">
                    'use strict';
                    let picker=new Datepicker();
                    let pickElm=picker.getElement();
                    let pLeft=200;
                    let pWidth=300;
                    pickElm.style.position='absolute';
                    pickElm.style.left=pLeft+'px';
                    pickElm.style.top='172px';
                    picker.attachTo(document.body);

                    picker.onPicked=function(){
                        let elgd=document.getElementById('StartDateG');
                        let elhd=document.getElementById('StartDateH');
                        if(picker.getPickedDate() instanceof Date){
                            elgd.value=picker.getPickedDate().getDateString();
                            elhd.value=picker.getOppositePickedDate().getDateString()
                        }else{
                            elhd.value=picker.getPickedDate().getDateString();
                            elgd.value=picker.getOppositePickedDate().getDateString()
                        }
                    };

                    function openSidebar(){
                        document.getElementById("mySidebar").style.display = "block"
                    }

                    function closeSidebar(){
                        document.getElementById("mySidebar").style.display = "none"
                    }

                    function dropdown(el){
                        if(el.className.indexOf('expanded')==-1){
                            el.className=el.className.replace('collapsed','expanded');
                        }else{
                            el.className=el.className.replace('expanded','collapsed');
                        }
                    }

                    function selectLang(el){
                        el.children[0].checked=true;
                        picker.setLanguage(el.children[0].value)
                    }

                    function setFirstDay(fd){
                        picker.setFirstDayOfWeek(fd)
                    }

                    function setYear(){
                        let el=document.getElementById('valYear');
                        picker.setFullYear(el.value)
                    }

                    function setMonth(){
                        let el=document.getElementById('valMonth');
                        picker.setMonth(el.value)
                    }

                    function updateWidth(el){
                        pWidth=parseInt(el.value);
                        if(!fixWidth()){
                            document.getElementById('valWidth').value=pWidth;
                            picker.setWidth(pWidth)
                        }
                    }

                    function pickDate(ev){
                        ev=ev||window.event;
                        let el=ev.target||ev.srcElement;
                        pLeft=ev.pageX;
                        fixWidth();
                        pickElm.style.top=ev.pageY+'px';
                        picker.setHijriMode(el.id=='StartDateH');
                        picker.show();
                        el.blur()
                    }

                    function gotoToday(){
                        picker.today()
                    }

                    function setTheme(){
                        let el=document.getElementById('txtTheme');
                        let n=parseInt(el.value);
                        if(!isNaN(n))picker.setTheme(n);
                        else picker.setTheme(el.value)
                    }

                    function newTheme(){
                        picker.setTheme()
                    }

                    function fixWidth(){
                        let docWidth=document.body.offsetWidth;
                        let isFixed=false;
                        if(pLeft+pWidth>docWidth)pLeft=docWidth-pWidth;
                        if(docWidth>=992&&pLeft<200)pLeft=200;
                        else if(docWidth<992&&pLeft<0)pLeft=0;
                        if(pLeft+pWidth>docWidth){
                            pWidth=docWidth-pLeft;
                            picker.setWidth(pWidth);
                            document.getElementById('valWidth').value=pWidth;
                            document.getElementById('sliderWidth').value=pWidth;
                            isFixed=true
                        }
                        pickElm.style.left=pLeft+'px';
                        return isFixed
                    }
                </script>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>End Date:</strong>

                <div id="datepicker"></div>
                <link rel="stylesheet" href="{{ asset('js/w3css/w3.css') }}"/>
                <script type="text/javascript" src="{{ asset('js/HijriDate.js/hijri-date.js') }}"></script>
                <script type="text/javascript" src="{{ asset('js/Datepicker.js/datepicker.js') }}"></script>
                <div class="w3-container w3-margin-top">
                    <div class="w3-container w3-margin-top">
                        <label for="EndDateG">Gregorian Date</label>
                        <input id="EndDateG" name="EndDateG" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
                    </div>
                    <div class="w3-container w3-margin-top">
                        <label for="EndDateH">Hijri Date</label>
                        <input id="EndDateH" name="EndDateH" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
                    </div>
                </div>
                <script type="text/javascript">
                    'use strict';
                    let picker=new Datepicker();
                    let pickElm=picker.getElement();
                    let pLeft=200;
                    let pWidth=300;
                    pickElm.style.position='absolute';
                    pickElm.style.left=pLeft+'px';
                    pickElm.style.top='172px';
                    picker.attachTo(document.body);

                    picker.onPicked=function(){
                        let elgd=document.getElementById('EndDateG');
                        let elhd=document.getElementById('EndDateH');
                        if(picker.getPickedDate() instanceof Date){
                            elgd.value=picker.getPickedDate().getDateString();
                            elhd.value=picker.getOppositePickedDate().getDateString()
                        }else{
                            elhd.value=picker.getPickedDate().getDateString();
                            elgd.value=picker.getOppositePickedDate().getDateString()
                        }
                    };

                    function openSidebar(){
                        document.getElementById("mySidebar").style.display = "block"
                    }

                    function closeSidebar(){
                        document.getElementById("mySidebar").style.display = "none"
                    }

                    function dropdown(el){
                        if(el.className.indexOf('expanded')==-1){
                            el.className=el.className.replace('collapsed','expanded');
                        }else{
                            el.className=el.className.replace('expanded','collapsed');
                        }
                    }

                    function selectLang(el){
                        el.children[0].checked=true;
                        picker.setLanguage(el.children[0].value)
                    }

                    function setFirstDay(fd){
                        picker.setFirstDayOfWeek(fd)
                    }

                    function setYear(){
                        let el=document.getElementById('valYear');
                        picker.setFullYear(el.value)
                    }

                    function setMonth(){
                        let el=document.getElementById('valMonth');
                        picker.setMonth(el.value)
                    }

                    function updateWidth(el){
                        pWidth=parseInt(el.value);
                        if(!fixWidth()){
                            document.getElementById('valWidth').value=pWidth;
                            picker.setWidth(pWidth)
                        }
                    }

                    function pickDate(ev){
                        ev=ev||window.event;
                        let el=ev.target||ev.srcElement;
                        pLeft=ev.pageX;
                        fixWidth();
                        pickElm.style.top=ev.pageY+'px';
                        picker.setHijriMode(el.id=='EndDateH');
                        picker.show();
                        el.blur()
                    }

                    function gotoToday(){
                        picker.today()
                    }

                    function setTheme(){
                        let el=document.getElementById('txtTheme');
                        let n=parseInt(el.value);
                        if(!isNaN(n))picker.setTheme(n);
                        else picker.setTheme(el.value)
                    }

                    function newTheme(){
                        picker.setTheme()
                    }

                    function fixWidth(){
                        let docWidth=document.body.offsetWidth;
                        let isFixed=false;
                        if(pLeft+pWidth>docWidth)pLeft=docWidth-pWidth;
                        if(docWidth>=992&&pLeft<200)pLeft=200;
                        else if(docWidth<992&&pLeft<0)pLeft=0;
                        if(pLeft+pWidth>docWidth){
                            pWidth=docWidth-pLeft;
                            picker.setWidth(pWidth);
                            document.getElementById('valWidth').value=pWidth;
                            document.getElementById('sliderWidth').value=pWidth;
                            isFixed=true
                        }
                        pickElm.style.left=pLeft+'px';
                        return isFixed
                    }
                </script>

[Mo7mud]

                    picker.onPicked=function(){
                        let elgd=document.getElementById('StartDateG');
                        let elhd=document.getElementById('StartDateH');
                        if(picker.getPickedDate() instanceof Date){
                            elgd.value=picker.getPickedDate().getDateString();
                            elhd.value=picker.getOppositePickedDate().getDateString()
                        }else{
                            elhd.value=picker.getPickedDate().getDateString();
                            elgd.value=picker.getOppositePickedDate().getDateString()
                        }
                    };

This usage is for demo purpose,
If you have 2 pickers on the same page you need to keep track of which input triggered the picker like this for example:

        let activeInput = null;

        function pickDate(ev){
            ev=ev||window.event;
            let el=ev.target||ev.srcElement;
            activeInput = el;   // Track the input that triggered the picker
            pLeft=ev.pageX;
            fixWidth();
            pickElm.style.top=ev.pageY+'px';
            picker.show();
            el.blur()
        }
       // Then

        picker.onPicked = function(){
            if (activeInput) {
                activeInput.value = picker.getPickedDate().getFormatedDate();
            }
        };

I forked the repo and made some enhancements on it.
https://github.com/Mohammad699/Hijri-Datepicker