Nepali Date-picker show on document.ready() - javascript

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

Related

Responsive filemanager callback function input field text

I am trying to add the value selected from responsive filemanager to a input text field, but once I select the value noting happen, the value does not go to the input text field.
I am following the documentation
Here you are my code:
<script>
function BrowseServer(id){
alert(id); // configuration
fileBrowserlink = "../admin/ckeditor/filemanager/dialog.php?type=2&editor=ckeditor&fldr=&field_id=" + id;
window.open(fileBrowserlink,'pdwfilebrowser', 'width=1000,height=650,scrollbars=no,toolbar=no,location=no');
}
</script>
<input type="text" name="configuration" value="" onclick="BrowseServer('configuration');" id="configuration">
I appreciate any help.
Thank you.
You cannot open the filemanager in a window according to the documentation page "You can use normal pop-up, Bootstrap modal, iframe, FancyBox iframe, Lightbox iframe to open the FileManager..."
Try using the following:
<div class="input-append">
<input id="configuration" type="text" value="">
Select
</div>
Also take a look at the code behind the demo page here for more examples. I based the above code snippet on this code.
Good Luck!

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/

Get updated date value on outside container click in bootstrap date picker inline (Combodate )

I am using date picker of bootstrap x-editable. Its working fine but I want to customized some of it's functionality. Suppose when we select any date and click on Tick mark then we can show the combined date inside a tag. So I want to get the same functionality onblur also (outside of the container but date should be change).
I think you can use this code into your input text as like that
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>

Disable Datapicker Calendar icon using Jquery?

I have a table which has a set of data.
Now in my table i have a checkbox for every row that enables or disables row.
When i click on checkbox that specific row should get disabled.
Issue is i am successfully able to disable the datepicker field but the calendar icon still remains enabled.
Below is the code i have been using:
For the datepicker textbox(Works Fine):
$(this).closest('tr').find('.animalBroughtDate').prop('disabled', true);
For the Calendar icon(Not working):
$(this).closest('tr').find('.ui-datepicker-trigger').hide();
HTML:
<input id="animalBroughtDateId" class="animalBroughtDate dtp hasDatepicker" style="width: 100px;" type="text">
<img title="Ok" alt="Ok" src="/../..datePicker.png" class="ui-datepicker-trigger">
Please guide.
Use built in U.I datepicker disable command.
$(this).closest('tr').find('.animalBroughtDate').datepicker("disable");
And in case you want to enable just :
$(this).closest('tr').find('.animalBroughtDate').datepicker("enable");

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

Categories