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));
}
}
});
});
Related
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));
});
});
});
How to replace Jul, Jan, Feb, Mar, Apr, May, Jun, Aug, Sep, Oct, Nov, Dec with word: "Period 1, Period 2, Period 3, Period 4".
I think 'll make detail:
- Make a array list
- Add to Dropdownlist
- Add to UI.
but, i do'nt know how to make this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(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));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Thanks so much.
This should do the trick (after initialization):
var monthNames = ['Period1','Period2','Period3','Period4','Period5','Period6',
'Period7','Period8','Period9','Period10','Period11','Period12'];
var monthNamesShort = ['Per1', 'Per2', 'Per3', 'Per4', 'Per5', 'Per6',
'Per7', 'Per8', 'Per9', 'Per10', 'Per11', 'Per12'];
$(".date-picker").datepicker( "option", "monthNames", monthNames);
$(".date-picker").datepicker( "option", "monthNamesShort", monthNamesShort);
Note that you should set monthNamesShort, too. These properties can also be set during initialization.
$(".date-picker").datepicker({
...,
monthNames: ['Period1', ...],
monthNamesShort:['Per1', ...],
...
});
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));
}
}
}
});
});
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