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', ...],
...
});
Related
This is my code:
jQuery(document).ready(function() {
jQuery(function() {
jQuery('#input_1_24').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date2 = jQuery('#input_1_25').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
jQuery('#input_1_25').datepicker('option', 'minDate', date2);
}
})
jQuery('#input_1_25').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = jQuery('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = jQuery('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = jQuery('#input_1_25').datepicker('option', 'minDate');
jQuery('#input_1_25').datepicker('setDate', minDate);
}
}
});
});
});
When i run my page with 2 input type text with id= "input_1_24" and id="input_1_25" my dev console get this error:
I have no idea what it could be... can u help me?
I decided to change my code like that:
jQuery(function() {
jQuery('#input_1_24').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date1 = jQuery('#input_1_24').datepicker('getDate');
console.log(date1);
date1.setDate(date1.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date1);
jQuery('#input_1_25').datepicker('option', 'minDate', date1);
}
})
jQuery('#input_1_25').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = jQuery('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = jQuery('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = jQuery('#input_1_25').datepicker('option', 'minDate');
jQuery('#input_1_25').datepicker('setDate', minDate);
}
}
});
});
});
in this way it works correctly!
You can do below way, see example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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_1_24" ).datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#input_1_24').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#input_1_25').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#input_1_25').datepicker('option', 'minDate', date2);
}
}
);
$( "#input_1_25" ).datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = $('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = $('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#input_1_25').datepicker('option', 'minDate');
$('#input_1_25').datepicker('setDate', minDate);
}
}
}
);
} );
</script>
</head>
<body>
<p>Date1: <input type="text" id="input_1_24"></p>
<p>Date2: <input type="text" id="input_1_25"></p>
</body>
</html>
var date2 = jQuery('#input_1_25').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date2);
In this code the "date2" will contains string, and you can't call setDate on it.
Try this:
var date2 = jQuery('#input_1_25').datepicker();
jQuery('#input_1_25').datepicker('setDate', date2.datepicker("getDate") + 1));
I want to display the day name when date is selected from the datepicker dynamically. When the user selects the particular date from datepicker i want to display which day it is dynamically.How can I fetch the day from the datepicker. Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7-dayNo);
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd', firstDay: 1,minDate: mindate
});
});
</script>
<input type="text" id="datepicker">
Use onSelect with custom define day [array] you want to display.
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7 - dayNo);
var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat' ];
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1,
minDate: mindate,
onSelect: function(dateText, inst) {
var today = new Date(dateText);
console.log(d[today.getDay()]);
$('#datepicker').val(dateText + ' ' +d[today.getDay()]);//If you only want day remove dateText concat part
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">
you can try this. I hope it will help you:
<input id="datepicker" type="text">
<p class="name"></p>
$( document ).ready(function() {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(dateText, inst) {
var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var dateText = $.datepicker.formatDate("DD", date, inst.settings);
$("p.name").html( "Day Name= " + dateText ); // Just the day of week
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
var d = "02-12-2016";
$(function () {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'mm-dd-yy';
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"> <input type="text" id="final"></p>
</body>
</html>
Hello friends i am using this var d="02-12-2016" and i want to show a next date in a text field which is in front of date picker and that text box will have a date 02-15-2016
I am working on it and i am not getting any way how it will be done.
according to api doc : jquery-ui-1.11 it work either.
minDate: d,
dateFormat: 'mm-dd-yy',
defaultDate: d,
altField: '#final'
It's better to use ISO format for date operations:
var d = "2016-02-12";
$(function() {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
$("#final").val(secondDate(date));
}
});
});
function secondDate(date) {
var d = new Date(date);
d.setDate(d.getDate() + 3);
var month = '' + (d.getMonth() + 1);
var day = '' + d.getDate();
var year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
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/
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));
}
}
});
});