Datepicker is not working for dynamically create fields - javascript

I have created a text field datetimepicker using jquery, but when i create field dynamically on this dynamic textbox datetimepicker is not working.
$(document).ready(function() {
$('#acd').on('click', '.dateyear', function() {
$('.dateyear').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.js"></script>
<div id="acd">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<input type="text" name="passyr[]" class="form-control dateyear">
</div>
</div>
</div>
</div>

I think you are not calling date picker dynamically. Need to call datepicker() dynamically. Mean after creating input box dynamically call
$('.dateyear').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
too there.

It is because when you initialise the datepicker ".dateyear" is not loaded so $ can't find ".dateyear" element so It can't bind datepicker with ".dateyear". when you click on text field It didn't show up datepicker. You need to initialise datepicker when your dynamic element attach to DOM structure.

Related

How to populate two text input with different types of date using keith wood jq

I use a text input to show the date from Keith Wood datepicker jq. I'm using ('ummalqura', 'ar') as the type of date.
so far so good.
The problem is that I want to populate another text input with the equivilant date in ('gregorian', 'en').
in another word, one click on the calendar to genrate two different set of dates, one in (ummalqura) and the other in (gregorian).
any help will be appreciated.
here is the html code:
<div class="container ">
ummalqura date type: <input id="ah" class="form-control" type="text" name="datePicker">
<br>
gregorian date type: <input type="text" id="ad" >
</div>
and here is the js to the calendar datepicker in the first text input:
<script>
$("#ah").calendarsPicker({
calendar:
$.calendars.instance('ummalqura', 'ar'),
startDate: '0d',
minDate: 0,
onSelect: function (dates) {
$(this).trigger('change');
}
});
</script>

Bootstrap Datetimepicker Display twice

I am getting the problem to display datetimepicker. i got the datetimepicker twice when i click id of shankar. I mentioned the screenshot below
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
$('#shankar').datetimepicker();
This code will help you:
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datepicker('show').on('changeDate',function(ev){
$('.datetimepicker').hide();
});
});
</script>
Please check , if you have defined a custom editor Templates for DateTime, and setting the class .datepicker there. its possible you are doing explicit duplicate initialization of calender control.
As you are using bootstrap ,bootstrap-datepicker.js initializes the all nodes which has .datepicker class without explicit instruction.
Remove the explicit initialization in your function.
source
You can try:
setTimeout(function(){
$('.dpdatetimepicker').datetimepicker({
startDate: new Date(start_date),
todayBtn: "linked",
orientation: "bottom auto",
daysOfWeekHighlighted: "5",
todayHighlight: true,
autoclose: true
});
},1000);

Jquery to get an instance and write it to input field

<div class="form-group">
<div class='input-group' id='datepicker-start'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon date"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Hi Guys this my date picker css with bootstrap
I am using Zebra Date Picker but using bootstrap icon instead of Zebra icon which is red and i don't like it
Following is my date picking Jquery
$(document).ready(function() {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function () {
$zdp = $('#datepicker-start').data('Zebra_DatePicker');
$('#start').val(zdp);
},
direction: true,
});
});
What I am trying to do is copy entered date into $zdp and set it to the value of input tag whose id is start.
I am new to javascript and jquery kindly guide what I am doing wrong casue this code is not running
I think, you need to use the onSelect handler like
$(document).ready(function () {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function (str1, str2, date, $el) {
$('#start').val(str1);
},
direction: true,
});
});

AUI datepicker error and workaround

I am checking the Liferay Site for Alloy UI date picker.
The problem in the given example is that there is no select option. If the DOB of my user is in 70's then the user has to click back button multiple times.
This is not a happy scenario for the user. How can I edit my AUI javascript to something like month and year option given by jquery here
I'm assuming that you are using AlloyUI 1.5 here, and so I would recommend using the DatePickerSelect component but hiding the select elements that you don't need with display: none;. Assuming that you only want a year dropdown, you could hide both the month and day dropdowns. I've created a runnable snippet example here:
AUI().use('aui-datepicker', function (A) {
var datePicker = new A.DatePickerSelect({
dayNode: '#day',
monthNode: '#month',
yearNode: '#year',
calendar: {
dateFormat: '%m/%d/%Y'
},
render: true
});
// Working around the fact that the calendar does not get updated
// when a new year is selected:
var yearNode = A.one('#year');
yearNode.on('change', function(event) {
datePicker.calendar.set('currentYear', yearNode.get('value'));
var date = datePicker.calendar.date;
datePicker.calendar.clear();
datePicker.calendar.date = date;
});
});
<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">
<div id="datePicker">
<select id="month" style="display: none;">
<option></option>
</select>
<select id="day" style="display: none;">
<option></option>
</select>
<select id="year">
<option></option>
</select>
</div>
AUI Element:
<aui:input name="dateOfBirth" cssClass="dob" id="dateOfBirth" title="Date Of Birth" placeholder="dd/mm/yyyy" readonly="true" >
Script:
$(".dob").datepicker({ dateFormat: "dd/mm/yy",minDate: new Date(), changeYear: true,changeMonth: true,yearRange: "-0:+10y", onClose: function(date, datepicker) {$(".dob").focus(); }});

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me
The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/
you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it

Categories