We Keep Coding

Nepali Date-picker show on document.ready()

I am using a custom calendar datepicker from the following link
http://sajanmaharjan.com.np/nepali-datepicker/
This datepicker seems to be working fine but I am failing to display the date-picker by default when a page loads.
we can display the calendar of jquery with $('#id').datepicker('show'), however above datepicker
doesn't have any such functionality. it can only be accessed only when a user clicks on textbox.
I tried initializing datepicker with an Id of an element
<div id="nepaliDate"></div>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Above code doesn't display calendar on page load.
The only code that works is with input type="text" and when we click on the textbox
<input type="text" id="nepaliDate"/>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Could any please help me in knowing how can I display the calendar on document.ready or window.load?
Thanks

Datepicker not working / showing - Bootstrap 5

I am trying to add a timepicker to my page using bootstrap 5, for some reason the calendar is not loading so I can not pick any date. I do not know if I have done something wrong or the plugin is not compatible with the latest version of bootstrap.
If you click 'launch demo modal' you will see the date input field and datepicker is not working there.
This is the code for the input date field:
<div class="col-12">
<label for="date" class="col-sm-1 col-form-label">Date</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text bg-white d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
JS (truncated):
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker();
...
});
</script>
I also tried using $('.datepicker').datepicker(); according to the bootstrap-datepicker docs but nothing changed.

Demo page
Stackoverflow source
You should put bootstrap-datepicker.min.js after jquery.js. It somehow make errors because of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Why add additional JS for datepicker fields?
You can simply make the input field of type date to get a native browser date selector.
Example:
<input type="date" class="form-control" name="date-field" />
Support for date (along with time) fields can be found on Can I Use.

Include below CSS and js in your file
Reference: https://cdnjs.com/libraries/bootstrap-datepicker
<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
<!-- Bootstrap datepicker JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
For custom styling please have a look at the below link
Bootstrap Datepicker - Custom Styles

Open bootstrap angular range date picker on click

I want to open Angular bootstrap range datepicker on click. The below code is working fine for normal datepicker. How do I open a bootstrap range datepicker?
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths" [navigation]="navigation" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d .toggle()" type="button">
<img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</div>

Probably already solved this.
You have access to dayTemplate when using the datepicker directive.
[dayTemplate]="t"
Your template start look like so ...
<ng-template #t let-date="date" let-focused="focused">
For this example I put the calendar click handler inside the ng template. But you can just as easily put it inside of the template. Remember with View child you can get hold of the datepicker methods that you would use such as open, close, and toggle.
https://stackblitz.com/edit/angular-skbpc8?file=app%2Fdatepicker-popup.html
A challenge that I have not figured out is getting both dates inside of the input field but you have to and from.
Much of this is taken from examples shared on the examples and api views.

Create INSPINIA Theme Form fields using Javascript

I'm trying to generate form fields dinamically with INSPINIA appearence, specifically INSPINIA datepicker. You can check this fields on: http://wrapbootstrap.com/preview/WB0R5L90S
First of all, I have at least one form generated with Symfony using the following code on the Type class.
{{ form_widget(form.date_from, { 'attr': {'class': 'datepicker form-control'}}) }}
This works fine, and generate the following html:
<input type="text" required="required" class="datepicker form-control" value="01-01-2017" aria-required="true">
Then, when I try to copy the entire form using JS and put the same code (cloning the form), the inspinia datepicker doesn't appears, only appears the standard text form.
It is posible to generate this datepicker using JavaScript?

Finally I fixed the problem, seems that Inspinia datepicker is based on jQuery datepicker, so.. I only need to call datepicker() function to get the code working as I expected.
More info about jQuery datepicker here: https://jqueryui.com/datepicker/

javascript-to display calendar in movable pop up

I want to display calendar every time in div tag which is movable pop up & user can select date from calendar in javascript

Take a look at jquery UI calendar control. Just include the JQUERY UI files to your HTML. Then
<input type="text" name="cal" id="cal" />
$("#cal").calendar();