date picker is not working on spring form:input - javascript

I am using spring form in my web page.
So for simple
<input type=text class="datepicker-1">
we are using <form:input path="" class="datepicker-1"/>
But while i am applying datepicker through JQUERY syntax in js file
$(function(){
$(".datepicker-1").datepicker();
});
Here for simple input html tag the calender is coming but for spring input tag the calender is not coming.
can anyone suggest me please.

Use cssClass instead of class
<form:input path="" cssClass="datepicker-1"/>
Also check that you are included jQuery and jQuery-ui library in your html page
$(function() {
$(".datepicker-1").datepicker();
});
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type=text class="datepicker-1">

Related

Mask input on MVC5

So, I'm trying to put some mask on my input, I have seen a lot of information arround this, however I couldn't find a way to work on my code. I tried with Jquery plugin masked input and Inputmask, any good results.
Here is my JS code with a function for each of those inputs:
(document).ready(function () {
$("#telephone").inputmask("mask", { "mask": "(99) 9999-99999" });
});
$(document).ready(function () {
$("#phone").mask("(999) 999-9999");
});
and the page where my input is:
<p>phone: <input type="text" id="phone" /></p>
<p>phone: <input type="text" id="telephone" /></p>
and on my _layout:
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/maskedinput")
#Scripts.Render("~/bundles/inputmask")
absoluty nothing happens on my front.
I'm a newbie at coding yet, and english is my second language, but I hope that this question is understandable.
Can you guys help me ?
If you don't mind using Third Party Library, you might want to look into Kendo UI Core which is Free and Open Source.
Usage is quite simple -
$(function() {
$("#telephone").kendoMaskedTextBox({
mask: "(999) 000-0000"
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<input id="telephone" value="555 123 4567" />
Here is the sample code at Kendo UI Dojo.

Can't create checkboxradio on element.nodeName=input and element.type=text

I have following html and when I preview the page, I get following error:
Can't create checkboxradio on element.nodeName=input and
element.type=text
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("input").checkboxradio();
});
</script>
</head>
<body>
<form action="#">
<label for="cbxForRent">For Rent</label>
<input type="checkbox" id="cbxForRent" />
<input type="text" id="txtZipCode" />
</form>
</body>
If I remove
<input type="text" id="txtZipCode" />
it will work properly. I think jquery tries to do something with the textbox.
what is the best way to resolve this issue?
The jQuery UI checkboxradio plugin works on checkboxes with a label only, not on text inputs, and $('input') targets both tags, make sure you target the checkbox only, and jQuery UI will no longer throw the error when it tries to convert a text input into a radiobutton
$(function () {
$("#cbxForRent").checkboxradio();
});
You could also target all checkboxes on the page with
$('input[type="checkbox"]')
or give them a common class to target them etc.

How to apply Jquery to textbox, CssClass instead of ID in Jquery,Bootstrap

I am using one JQuery plugin which is giving me Calendar with Time selection on click of that textbox this plugin very flexible to use.
below is the code which I am referring to use this plugin.
<link href="DateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="DateTimePicker/jquery.js" type="text/javascript"></script>
<script src="DateTimePicker/jquery.datetimepicker.full.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker_mask').datetimepicker({
mask: '9999/19/39 29:59'
});
});
</script>
<h3>Mask DateTimePicker</h3>
<input type="text" value="" id="datetimepicker_mask"/><br><br>
Above code works fine for me for single Textbox.
but I have to use this plugin for more then one textbox so this I can use only if this plugin is taking by Class instaed of Id.
so I am not getting what change I have to do in the Jquery to achieve the task.
there are so many Jquery & Css which is dependent on this.
Can anyone help me for this.
JQuery's selectors are very similar to CSS selectors. So you can use .class to select by class.
In your example you would change your selector to
$('.datetimepicker_mask')
And use a class on your input instead of id
<input type="text" value="" class="datetimepicker_mask"/>

Javascript snippet not working inside modal

I'm using Tigra calendar (https://www.softcomplex.com/products/tigra_calendar/) in my code as a simple pop-up calendar with any input text, but I'm facing some kind of problem that's driving me nuts.
To use this calendar, it's just needed to add
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
in the head section, and add class="tcal" to the input
<input type="text" name="date" class="tcal" value="" />
Working demo in https://jsfiddle.net/fgh7yjg7/
But now, using the same calendar inside a Bootstrap3 modal, it simply doesn't work in my code (although it does in a simple modal sample with jsfiddle)
What could be wrong?

jQuery datepicker not working at all

I have a very annoying problem with jQuery and the datepicker from jQuery-UI.
Here is my javascript code:
<script type="text/javascript">
/*<![CDATA[*/
<!--
$(function(){
$("#startdate").datepicker({dateFormat: 'dd.mm.yyyy'});
});
// -->
/*]]>*/
</script>
And here the HTML part:
<input type="text" name="tx_cal_controller[startdate]" id="startdate" readonly="readonly">
The necessary JavaScript libraries are included in the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://foo.bar/fileadmin/res/jquery-ui-1.8.17.custom.min.js?1328657226" type="text/javascript"></script>
But there is no datepicker when I click on the input field. I would really appreciate it, if anyone could give me a hint.
Thanks in advance.
I solved it. There was a problem with the div of the datepicker. I had to include my own jQuery-UI package and modify it, so that when the input field gets clicked, the z-index of the datepicker gets higher (>1000) than the one of the other content divs and therefore visible.

Categories