hae, am working with $(document).on('click','',function(){}); but its not working as i want
below is my code:
<script type="text/javascript">
$(function () {
$(document).on('click', '.date-picker', function () {
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
</script>
table_html = '<td style="min-width: 200px;"><input name="' + control_id + '" id="' + control_id + '" value="' + row_val + '" type="date" data-role="datebox" data-options=\'{"mode": "calbox", "useClearButton": true}\' ></td>';
$('#variables').append(table_html);
The above code creates a month year picker. It works fine.
But when I click for the 1st time, the month picker control does nothing. When I clicked outside it and click on it again, it worked.
Any idea or suggestions on how the click event will be detected on 1st time click will be highly appreciated
Try show()
$(function () {
$(document).on('click', '.date-picker', function () {
var datepicker = $(this).data('uidatepicker');
if(datepicker) return;
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}).datepicker('show');
});
});
Demo: Fiddle
Related
In this image when i select value from drop down and select dates then container is displayed and then when i select row from table data then cont and sumdata div is displayed now i want when i select again dates from date picker then want to hide all divs ... and when click on search then want to display container
<script type="text/javascript">
$(function () {
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
var currentDay = (new Date).getDate();
$('#fromdate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
//minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: new Date(currentYear, currentMonth, currentDay),
//maxDate: new Date((currentYear + 1), 12, 1),
onSelect: function (selectedDate) {
// Start Date
var startDate = $(this).datepicker('getDate');
//startDate.SetHours(0);
//startDate.setMinutes(0);
//startDate.setSeconds(0);
$('#todate').datepicker('option', 'minDate', startDate);
$('#todate').datepicker('setDate', startDate);
// End Date
var enddate = $(this).datepicker('getDate');
enddate.setDate(enddate.getDate() + 60);
// endDate.setMonth(endDate.getMonth() + 2);
$('#todate').datetimepicker('option', 'maxDate', enddate);
}
});
$('#todate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: '+30',
//maxDate: endDate.setMonth(endDate.getMonth() + 2)
});
$('#fromdate').on('click', function () {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
});
$("#todate").datepicker({
onSelect: function (dateText) {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
}
});
});
</script>
Use the onselect option to execute any JavaScript transformations
e.g.:
$(".datepicker").datepicker({
onSelect: function(dateText) {
// hide your divs
$('.mydivs').hide();
}
});
http://api.jqueryui.com/datepicker/#option-onSelect
working fiddle:
https://jsfiddle.net/7dy0wduc/
I want to use jquery UI datepicker as month select picker. What is the code for it? Here I tried but it wasn't success
$('#startDateTotal').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-MM ',
maxDate: 0,
onClose: function (selectedDate) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
$("#endDateTotal").datepicker("option", "minDate", selectedDate);
}
Add the following css to it:
.ui-datepicker-calendar {
display: none;
}
This hides the calendar and is a hacky way of doing it, but it is the only way out.
I hope the following code helps you,
Visit http://jsfiddle.net/tmnasim/JLydp/
html
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
css
.ui-datepicker-calendar {
display: none; }
jquery
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
i want to get month/year picker slider on right side of my website.i got a code from one site.it is working,but after i download its not working.i added jquery.js folder.is it right.please help..my code is
<script src="jquery.js"></script>
<script src="jquery.min.js.">
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
</script>
<style type="text/css">
ui-datepicker-calendar {
display: none;
}
</style>
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
please help.whicj jquery i have to include?jquery.js or jquery.min.js?
You have to include correct files:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
JS:
$(function () {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function () {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function () {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/797/
I have this date time picker from jquery . here is my code. it's not working after adding some code for month and year only.
the problem is after selecting on the 2nd input. the first input disappears.. then also. make the validation of min and maxdate (e.g first input --- 5/2014 - 6/2014 the validation there is on the second input you can't select months before month of may.
$(function() {
$( "#dtp1" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
$(function() {
$( "#dtp2" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
$( "#dtp1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
here is the link http://jsfiddle.net/wind_chime18/RUmCg/2/
I have done your validation for 2nd date picker you can copy it for 1st datepicker.
Check link
js fiddle link
//Php code
<input type="text" id="dtp1">
<input type="text" id="dtp2">
<!--<input type="text" id="dtp2" disabled>-->
//Javascript COde
$(function () {
$("#dtp1").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
//$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
//$("#dtp2").removeAttr('disabled');
}
});
});
$(function () {
$("#dtp2").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
if($("#dtp1").val() == "") {
alert("Please select dpt1");
return false;
}
else {
var dtp1 = $("#dtp1").val();
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
var d1, d2;
d2 = (year *1 ) + ((month *1)/ 12);
d1 = (dtp1.split('/')[1] *1 ) + ((dtp1.split('/')[0] *1)/ 12);
if(d1 > d2) {
alert("dpt1 is greater then dpt2");
return false;
}
else {
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
}
});
});
How to convert jQuery date picker to select month and year only?. I tried it using date format, it working but show dates too. I am trying a way to select month and year only
I wrote code,
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'MM yy'});
});
</script>
<input type="text" id="datepicker">
Your answer is here.
http://jsfiddle.net/bopperben/DBpJe/
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
Credits to nitin from his post... jQuery UI DatePicker to show month year only
This is what I did for create a dropdown instead of use datepicker. Just jQuery is needed.
HTML:
<select class="form-control" id="yearMonthInput"></select>
javascript code:
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (i = new Date().getFullYear() ; i > 2008; i--) {
$.each(months, function (index, value) {
$('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
});
}
And looks in this way:
$(document).ready(function() {
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
onClose: function() {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
},
beforeShow: function() {
if ((selDate = $(this).val()).length > 0)
{
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});
});