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

[prakashjain]

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
      });
    });

[balbarak]

Hello,

can you clearfiy what you are going to achieve ?

the picker data name is HijriDatePicker and you could use

$(element).removeData('HijriDatePicker');

if you want to destroy the datetime picker use the following

$("#hijri-date-input").data('HijriDatePicker').destroy();

Hope I get what you want to achieve

Thanks

[prakashjain]

Yes, same thing want to achieve. but the above code not working.
Please see the below sample code.

<title> Bootstrap Hijri Date Picker </title>

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

<div class="container">
    <div class="py-5 text-center">
        <h2>Checkout form</h2>
        <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
    </div>

    <div class="row">
        <div class="col-md-6">

            <div class="form-group">
                <div class="input-group date">
                    <input type='text' class="form-control" id="hijri-date-input" />
                         <select id="locale" name="lang">
                                      <option value="show" selected="selected">Show</option>
                                      <option value="hide">Hide</option>
                                </select>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/momentjs.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/moment-hijri.js"></script>
<script src="js/bootstrap-hijri-datetimepicker.js"></script>

<script type="text/javascript">


    $(function () {
        initHijrDatePicker();
    });

  $("#locale").on("change", function() {
  if($(this).val()=='hide') {
    $("#hijri-date-input").data('HijriDatePicker').destroy();
    //$(#hijri-date-input).removeData('HijriDatePicker');
  }
  if($(this).val()=='show') {
  alert("Showing");
    initHijrDatePicker();
    //$(#hijri-date-input).removeData('HijriDatePicker');
  }
});

    function initHijrDatePicker() {
        $("#hijri-date-input").hijriDatePicker({
            locale: "en",
            format: "DD-MM-YYYY",
            //hijriFormat:"iYYYY-iMM-iDD",
            //dayViewHeaderFormat: "MMMM YYYY",
            //hijriDayViewHeaderFormat: "iMMMM iYYYY",
            showSwitcher: true,
            allowInputToggle: true,
            showTodayButton: false,
            useCurrent: true,
            isRTL: false,
            keepOpen: false,
            hijri: true,
            debug: true,
            showClear: true,
            showTodayButton: true,
            showClose: true
        });
    }


    function initHijrDatePickerDefault() {
        $("#hijri-date-input").hijriDatePicker();
    }


</script>

[balbarak]

try to call this code alone and see if the datepicker get destoyed or not

$("#hijri-date-input").data('HijriDatePicker').destroy()

Thanks

[prakashjain]

Sorry for the late reply.
$("#hijri-date-input").data('HijriDatePicker').destroy()
Yes the above code working to destroy, but after destroy using below code to display Hijr Date picker
initHijrDatePicker();
But now showing. I would like to show/hide Hijr date picker based on selection on change called
initHijrDatePicker(); method but not showing calendar view.

[balbarak]

Soon, we will improve the docs and list all features.

Hope you will find what are you looking for

Thanks