Giter VIP home page Giter VIP logo

bootstrap-hijri-datepicker's Introduction

Demo

See Live Demo

Getting Started

Bootstrap Hijri Date picker v1.0.0

sample sample two

Installation

Download the latest release or use css and javascript files in dist folder

Required libraries

Usage

includes

css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<script src="js/bootstrap-hijri-datepicker.min.js"></script>

html

 <div class="form-group">
    <label>
        Date
    </label>
    <div class="input-group">
        <input type='text' class="form-control" id="hijri-date-input" />
    </div>
</div>

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="js/bootstrap-hijri-datepicker.min.js"></script>
    
<script type="text/javascript">
    $(function () {
        $("#hijri-date-input").hijriDatePicker();
    });
</script>

Complete Sample

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        Bootstrap Hijri Date Picker
    </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

</head>
<body class="bg-light">
    <div class="container">

        <div class="form-group">
            <label>
                Date
            </label>
            <div class="input-group">
                <input type='text' class="form-control" id="hijri-date-input" />
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
    <script src="js/bootstrap-hijri-datepicker.min.js"></script>
    <script type="text/javascript">

        $(function () {

            $("#hijri-date-input").hijriDatePicker();

        });

    </script>

</body>
</html>

Docs

See Documentation

Acknowledgements

This project was built from great work done by

License

MIT

bootstrap-hijri-datepicker's People

Contributors

balbarak avatar looksharp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-hijri-datepicker's Issues

Hijri Year Issue - 5 Digits

Hi I am getting strange hijri year, I tried to set minDate and maxDate and nothing worked

Here is my config:
$("#id").hijriDatePicker({ locale:"ar-sa", hijri: true, viewMode: 'days', showClose: true, showClear: false, showSwitcher:false, showTodayButton: true, useCurrent:false, });

and the date value is: 1440-04-10
image

Hide and Show hijriDatePicker() and show text based on condition

Hello,

Normal datepicker support below code to hide datepicker.
$('#datepicker').datepicker("disable")

bootstrap-hijri-datetimepicker.js" lib picker.destroy function available:
picker.destroy = function () {
///
Destroys the widget and removes all attached event listeners
hide();
detachDatePickerElementEvents();
element.removeData('DateTimePicker');
element.removeData('date');
};

$('#datepicker').datepicker("disable") o hide how to implement in hijriDatePicker() in custom js ?
$(function () {
$("#hijri-date-input").hijriDatePicker();
});

$("#hijri-date-input").on('dp.hide', function (event) {
  // would like to hide hijriDatePicker()
 // if  locale: "ar-sa" (selection other than ar-sa) only show text field try many methods but //working
      });
    });

Some Options not work

Thanks For This Plugin BTW ♥
Those Options not work

  • disabledDates
  • daysOfWeekDisabled

Current day problem

Hello ,
the problem is at current day selection the Ramazan month was 29 days at some countries and the Shawal month show one day less selected, could you help me to decrees on-day of current day.
Thanks

Wrong gregorian date returned when hijri : true

I've made a hijri date picker like this:

$("#dateOfBirth").hijriDatePicker({
            hijri: true,
            showSwitcher: false
        });

When I try to get the Gregorian date to send it to my API, it returned the date - 1 day:
$("#dateOfBirth").data().HijriDatePicker.date()

Local is not changing for date type

Hello,

Let me start by thanking you for your hard work.

When changing the date locale by using this command :

$('#picker').hijriDatePicker({ locale:'en-us' });

the date type at the bottom is still in arabic instead of english

هجري ميلادي
instead of
Hijri Georgian

On change event

How can I pick on change event? I try lots of methods but nothing worked.
jQuery("#CaseHijriDate)").hijriDatePicker({ locale: "ar-sa", format: 'mm/dd/yyyy', hijri: true, hijriFormat: 'iMM/iDD/iYYYY', showSwitcher: false, allowInputToggle: false, showTodayButton: true, useCurrent: true, isRTL: false, keepOpen: false, showClear: true, showClose: false }).change(function () { alert('test'); });
i also try below code but not succes
jQuery('#CaseHijriDate)').change(function () { alert('test'); });
also please mention all events which is working.

Date Range

when I set a date to input "fromDate". how to set "minDate" to input "toDate". I tried but "minDate" not applied!
$("#fromDate").on('dp.change', function (data) {
let date = data.date;
$('#toDate').hijriDatePicker({ minDate: date.format("YYYY/M/D") });
});

Modify hijri date in calender

Hi,
hijri date is variant and maybe need adjustment at the beginning of month, is there any proper way to control this adjustment or it adjust automatically?
Thanks

multidates

how can i select more than one date ?

How i can change from hijri to gregorian and vice versa?

Based on user input I need to show different calendars. I tried the below logic but it has not worked for me. Is there any setter function that we can use to switch calendar using code snippet ?

     if(_this.val() == 1) { 

           // I need to show hijri calendar
           
            _dateSelctor.hijriDatePicker({
                hijri: true,
                locale: 'ar-sa',
                format: 'YYYY-DD-MM',
                useCurrent: false,
                showSwitcher: false
            });
        }else{

           // I need to show Gregorian  calendar

            _dateSelctor.hijriDatePicker({
                hijri: false,
                locale: 'ar-sa',
                format: 'YYYY-DD-MM',
                useCurrent: false,
                showSwitcher: false
            });
        }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.