JavaScript Hijri/Gregorian Datepicker Library

Demo

Demo here.

Dependencies

HijriDate.js which allows the use of HijriDate objects, JS library to calculates Hijri dates in the same way as built-in Date object calculates Gregorian dates.
w3css, originally forked from CSS Framework by Jan Egil Refsnes for styling this widget.

Usage

Simply put this code snippet to anywhere you want in the body of your html file:

Offline

<div id="datepicker"></div>
<link rel="stylesheet" href="../w3css/w3.css" />
<script type="text/javascript" src="../HijriDate.js/hijri-date.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript">
    let datepicker = new Datepicker();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    // or use
    // datepicker.attachTo(document.getElementById('datepicker'));
    // other code
</script>

Online

<div id="datepicker"></div>
<link rel="stylesheet" href="https://zulns.github.io/w3css/w3.css" />
<script type="text/javascript" src="https://zulns.github.io/HijriDate.js/hijri-date.js"></script>
<script type="text/javascript" src="https://zulns.github.io/Datepicker.js/datepicker.js"></script>
<script type="text/javascript">
    let datepicker = new Datepicker();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    // or use
    // datepicker.attachTo(document.getElementById('datepicker'));
    // other code
</script>

Supported Languages

Languages currently supported are:

Arabic ("ar")
English ("en")
Indonesian ("id")

You can extend with your own language by adding this code snippet (assume your language is English):

Datepicker.language["en"] = {
    isRTL: false,             // or true for right to left language
    eraSuffix: ["AD", "BC"],  // suffix for Gregorian era
    hEraSuffix: ["H", "BH"],  // suffix for Hijri era
    monthNames: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    weekdayNames: [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ],
    weekdayShortNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    hMonthNames: [
        "Muharram",
        "Safar",
        "Rabi'ul-Awwal",
        "Rabi'ul-Akhir",
        "Jumadal-Ula",
        "Jumadal-Akhir",
        "Rajab","Sha'ban",
        "Ramadan",
        "Syawwal",
        "Dhul-Qa'da",
        "Dhul-Hijja"
    ];
};

API Documentation

API doc here.

Designed By ZulNs

@Gorontalo, 8 January 2019

2 dates in one page

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>

zulns / datepicker.js Goto Github PK

datepicker.js's Introduction

JavaScript Hijri/Gregorian Datepicker Library

Demo

Dependencies

Usage

Offline

Online

Supported Languages

API Documentation

Designed By ZulNs

@Gorontalo, 8 January 2019

datepicker.js's People

Contributors

Stargazers

Watchers

Forkers

datepicker.js's Issues

Recommend Projects

Recommend Topics

Recommend Org