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

adding the data-i18n attribute using jquery

I'm working on a form which is supporting multiple languages by using data-i18n, and I want to use jquery to add the message below the form if the input of the form cannot be validated.
(The multi-language message content of all sites is included in the local json files: the form page is named as formPage and the input section is named as inputDescription)
But the message content doesn't show up although I'm using $(jquery).attr(), can anyone help to check if I do anything wrong or what should I do to make it works?
Thanks in advance!
$(".msg").attr("data-i18n", "formPage.inputDescription" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" step=any class="form-control" min="5000" max="1000000" value="">
<small data-i18n="" class="form-text msg"></small>
</form>

Finally got the answer, post and share here. It's necessary to call localize $(jquery).localize() again after the attribution $(jquery).attr(), although localize has been called in the html file.

vuejs-datepicker with required attribute gets submitted without value

vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.
<form>
<datepicker placeholder="Select Date" required></datepicker>
<button>Submit</button>
</form>
You can use the above code and test here:
https://codesandbox.io/s/p92k8l717
Here is the link to repo and doc: https://github.com/charliekassel/vuejs-datepicker

You can use vee-validate library to validate this like:
<date-picker :input-class="{'input': true, 'is-danger': errors.has('date') }"
v-model="date"
:disabled="state.disabled"
placeholder="Select date"
input-class="form-control"
></date-picker>
<span v-show="errors.has('date')" class="help is-danger-red">{{ errors.first('date') }}</span>
<input type="hidden" name="date" v-validate="'required'" v-model="date">
You can use this trick to solve this issue, It's works for me.

You can use input-attr to set the required attribute like :input-attr="{required: 'true'}"

I was facing the similar issue, not with this plugin but some other plugin and one get around that worked for me was using vee-validate
This is the best validation plugin available for vue-js.
Hope this helps!

A non-Vue datepicker library flatpickr also has this problem. I managed to resolve it by allowing user input (typeable prop of this library) which removes the readonly attribute which actually prevents the form submission on empty required field and also displays the native browser popup. The side effect is a date can now be directly typed into the input field which then forces you to parse the user input. To make up for that you have to suppress all user input in the field.
See the similar flatpickr question where I posted the complete solution. I used the onReady event of flatpickr which seems to have no equivalent in vuejs-datepicker settings unfortunately.
Flatpickr can be used in Vue thanks to vue-flatpickr-component library if you are OK with migrating.

jQuery modal dialog and form

I have a form which sends post data to a PHP parser, but I'm asking the user to input A LOT of data, so I went for jQuery UI modal dialogs to simplify the input.
So user enters values for fields - Name, Company, etc. and opens a dialog where he can pick machines, parts, etc. Sample code below.
<form method="post">
<input name="first_name" type="text">
<input name="last_name" type="text">
<div id="modal">
...
some more inputs here
...
</div>
</form>
The thing is, that the inputs which are in the modal dialog are not posted to PHP. Normally the modal window is hidden via CSS and it's hidden on posting the form so I suppose this is the issue.
Has anyone faced the same or similar problem?
Any hot fix for it?
I got to mention that hard-coding javascript to set the inputs' values in the modal out of it is not an option because we have like 30 different modals with over 10 input fields in it.

Try the HTML5 input element's form attribute for the elements defined in your modal.
http://www.w3schools.com/htmL/html_form_attributes.asp

AngularJS validation, binding, etc. not working when using jQuery plugins (eg. autoNumeric)

I have an angular form which was using angular's built-in validation successfully. Take the following markup for example:
<form name="numberForm" novalidate>
<input type="text" required />
<button type="submit">Submit</button>
</form>
When the browser loads, the input field renders like this (unnecessary attributes removed):
<input class="ng-pristine ng-invalid ng-invalid-required" />
If I were to enter a value in the input field, the markup turns into:
<input class="ng-dirty ng-valid ng-valid-required" />
All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.
Any ideas?
I tried creating a http://jsfiddle.net/ma44H/3/, but can't seem to figure out how to get it to work.

JQuery and Angular do not cooperate well
Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to accomplish this.
The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.
Alternative #1: Angular UI
Try Angular-UI. Set of tools every Angular Developer could use.
Whatever Mask you want to implement can be done with their ui-mask directive:
Want a Date Mask?
<input type="text" ng-model="date" ui-mask="99/99/9999" />
Currency Mask?
<input type="text" ng-model="currency" ui-mask="$99999999.99" />
Phone Mask?
<input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />
:
See Fiddle
:
Alternative #2: Filters
Angular has built-in filters:
Currency:
$filter('currency')(amount, symbol)
Date:
$filter('date')(date, format)
Insist on using JQuery? Try the jQuery Passthrough directive from the angular-ui toolset. I haven't made use of this directive but it's an intriguing option:
To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note
that the name of the function must be identical. This also works for
normal jQuery commands such as $.fn.slideUp().
To pass parameters use the ui-options attribute. The value will be
evaluated in the $scope context and passed to the function. If
defaults are set, the passed options will extend them. If a string is
passed, the default options will be ignored.
Use the directive name jq for namespacing inside uiJqConfig. Then
sub-namespace options for each function by the name of that function
(exactly as it is passed to ui-jq) so that you don't have to pass
options every time you call the directive.