Is it possible to show a jquery inline datepicker by a specific month and year? Lets say I want to see the inline datepicker for Nov 2014. And it shows the complete month without selecting any date.
Try to use option-dateFormat like,
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'M yy'
});
});
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'M yy'
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<input id="datepicker"/>
If you want to showonly month and year drop down then try the below snippet
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'M yy',
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<input id="datepicker"/>
Not only One. You can even create multiple instances of datepicker each of them will be of different month. Look here.
(function(){
for( var i=0; i<5; i++ ){
var dateObj = new Date();
dateObj.setMonth(i);
dateObj.setYear(dateObj.getFullYear());
var dp = $('<div id="calendar' + i + '" > </div>');
$('#Calendar').append(dp);
console.log("Month: "+dateObj.getMonth());
dp.datepicker({defaultDate: dateObj});
}
})();
Related
I am trying to work on a start date and end date in javascript using datepicker. I have jQuery 2.1.1. I cannot change the jQuery version because there are other methods that are using this version in the application. The setStartDate, setEndDate and setDate are not changing by clicking or changing the date manually. Any suggestion, tips or help will be greatly appreciated. Here is my code below:
<script>
$(document).ready(function () {
var currentDate = new Date();
$('.hasStartDate').datepicker({
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: '-1m',
maxDate: '+3m',
beforeShowDay: $.datepicker.noWeekends
}).on('changeDate', function(e){
$('.hasEndDate').datepicker('option', 'minDate', e.date),
$('.hasEndDate').datepicker('option', 'maxDate', e.date + 364),
$('.hasEndDate').datepicker('setStartDate', e.date),
$('.hasEndDate').datepicker('setEndDate', e.date + 364),
$('.hasEndDate').datepicker('setDate', e.date + 364),
$('.hasEndDate').datepicker('refresh')
});
$('.hasStartDate').datepicker('setDate', currentDate);
var tdate = $('.hasStarDate').datepicker('getDate');
var ddate = tdate + 364;
$('.hasEndDate').datepicker({
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: tdate + 1,
maxDate: ddate,
beforeShowDay: $.datepicker.noWeekends
}).on('changeDate', function(e){
$('.hasStartDate').datepicker('setEndDate', e.date)
});
$('.hasEndDate').datepicker('setDate', ddate);
});
</script>
This should do the trick. On selecting a date, split it into day, month, year and construct min and max dates and set it using options dynamically.
$(document).ready(function () {
$('.hasStartDate').datepicker({
dateFormat: "yy/mm/dd",
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: '-1m',
maxDate: '+3m',
beforeShowDay: $.datepicker.noWeekends,
onSelect:function(date){
var d = date.split("/");
d = d.map(function(item){return parseInt(item)});
var mindate = new Date(d[0], d[1]-1, d[2]+1);
var maxdate = new Date(d[0], d[1]-1, d[2]+365);
$('.hasEndDate').datepicker('option','minDate',mindate);
$('.hasEndDate').datepicker('option','maxDate', maxdate);
}
});
$('.hasEndDate').datepicker({
dateFormat: "yy/mm/dd",
autoClose: true,
changeMonth: true,
changeYear: true,
beforeShowDay: $.datepicker.noWeekends
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input class="hasStartDate"/>
<input class="hasEndDate"/>
I'm using JQuery-UI Calendar. My goal is to identify the day of the week for example Wednesday and format the date in the input like this 07/20/2017.
So far I was able to identify the day of the week using dateFormat:DD by splitting the date.
Now the issue is the input field appends the date like this Wednesday/07/20/2017. While I would like to append it like 07/20/2017
$(function() {
$('#datepicker').datepicker({
dateFormat: 'DD/mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
$(".inner").append(day[0]);
$("#datepicker").append(day[1]);
}
})
});
<link rel="stylesheet" href="http://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>
<input type="text" id="datepicker">
<div class="inner">
<p></p>
</div>
Please try this code:
$(function() {
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);
$(".inner").append(dayName);
$("#datepicker").append(day[1]);
}
})
});
What I did is this:
Change the dateFromat to 'mm/dd/yy' from 'DD/mm/dd/yy'.
In order to get the name of the day i added this two lines of code
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);
I'm using bootstrap-datepicker and I have attached a listner to changeMonth event.
If I use one of setters listed here (e.g. setStartDate, setDatesDisabled, setDaysOfWeekHighlighted etc.) inside my listner, the picker view does not updates (month is unchanged). Everything works fine, if I do not use any datepicker's setter inside my listner.
Here a live sample showing the issue. In this example I'm trying to update dinamically hightlighted dates when the user changes months.
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
What am I missing?
I came across this issue when I aswered this question where I used setDatesDisabled inside changeMonth listner.
EDIT (after comments)
I've tried both using $(this) inside 'changeMonth' and assign my datepicker to a variable as shown here:
var dt = $('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
})
dt.on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// Neither using dt nor $(this) works
dt.datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
but the problem is still there.
#VincenzoC Please make sure you're using the latest version (1.7.1), this Fiddle demonstrates that it works https://jsfiddle.net/s35za9dr/
function getHighlighted(month){
var highlitedDays = [0, 1];
if( month % 2 == 0 ){
highlitedDays = [3, 4];
}
return highlitedDays;
}
$('#datepicker').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var highlightedDays = getHighlighted(month);
// I use setDaysOfWeekHighlighted just as example
$('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
// Do something else
//...
});
$('#datepicker2').datepicker({
daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
updateViewDate: false
}).on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
EDIT
Using any of the set* methods (e.g. setDatesDisabled) in the changeMonth, changeYear, changeDecade or changeCentury events will trigger an update which will cause the picker to revert back to the month in which the current view date occurs.
To prevent this you simply need to initiate the picker with the updateViewDate option set to false.
Problem: Your method update to current date whenever you change the date.
Solution: Try following code.
Remove your current on change method.
Add document Ready for initialize to current date and other is default.
<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
<script>
$( document ).ready(function() {
var startDate = $('#datepicker').datepicker('setStartDate', new Date());
});
$('#datepicker').datepicker().on('change', function(e){
// I use setStartDate just as example
var startDate = $('#datepicker').datepicker('setDaysOfWeekHighlighted', ['2016-04-29', '2016-04-30']);
// Do something else
//...
});
$('#datepicker2').datepicker().on('changeMonth', function(e){
console.log("I've just changed month to " + e.date.getMonth());
});
</script>
</head>
<body>
</body>
</html>
I have strange issue on datepicker that I cant choose date from FIREFOX rather it accepts date (typed manually) as input to process.
I am using Jquery date picker USING jquery version v1.11.2
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$("#todate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-150:c",
minDate: parsed_date,
maxDate: "+0d"
});
var todate = '<?=str_replace('-', '/',$totimestamp);?>'
if (todate != 'NULL') {
$("#todate").datepicker("setDate", todate);
}
$("#fromdate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-150:c",
minDate: parsed_date,
maxDate: "+0d"
});
var fromdate = '<?= str_replace('-', '/',$fromtimestamp);?>';
if (fromdate != 'NULL') {
$("#fromdate").datepicker("setDate", fromdate);
}
});
This works fine with chrome and other browsers ( I could choose from date selector) but in firefox its not working.
I tried with sample independently it works fine.
I'm Not sure whether your code even worked in any other browsers also.I see the syntax error SyntaxError: missing } after function body
you need to close document ready.try this:
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$( "#todate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var todate="<?=str_replace('-', '/',$totimestamp);?>";
if (todate != 'NULL') {
$("#todate").datepicker("setDate",todate);
}
$( "#fromdate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var fromdate="<?= str_replace('-', '/',$fromtimestamp);?>";
if (fromdate!= 'NULL') {
$("#fromdate").datepicker("setDate",fromdate);
}
});
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<input type="text" id="fromdate"/> <input type="text" id="todate"/>
Or Try setting z-index of input to something like 10000 and see
This code works on IE, firefox and explorer
<html>
<body>
<div>
FromDate: <input type="text" id="fromdate" class="datepicker"/>
ToDate: <input type="text" id="todate" class="datepicker"/>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$("#todate").datepicker({dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var todate="<?=str_replace('-', '/','19-11-2015');?>"
if (todate != 'NULL') {
$("#todate").datepicker("setDate",todate);
}
$( "#fromdate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true, changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var fromdate="<?= str_replace('-', '/','21-11-2015');?>"
if (fromdate!= 'NULL') {
$("#fromdate").datepicker("setDate",fromdate);
}
});
</script>
</body>
Here it is the link to jsfiddle
https://jsfiddle.net/tz3qLaa8/
Please note that the code
var todate = '<?=str_replace('-', '/',$totimestamp);?>'
is wrong. You need to use double quote on openinig and closing the string because you use the single quote inside the string
Hello am not able to display a month picker placed inside a table.
<!DOCTYPE html>
<head>
<script src="js/libs/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/libs/jquery-ui-1.10.3.custom.min.js"></script>
$(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));
}
});
});
</script>
<script>
window.onload = function () {
PreLoadSection();
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<div id="variables" name="variables" style="width:100%; overflow:auto; overflow: scroll;">
</div>
</body>
</html>
above is my htm code and below my .js file
function PreLoadSection()
{
LoadSectionStratified();
}
function LoadSectionStratified() {
$('#variables').append($('<table id="variables_table">'));
$('#variables').append($('<tr>'));
$('#variables').append('<th style="border: 10px">month picker</th>');
$('#variables').append($('</tr>'));
$('#variables').append($('<tr>'));
AddDate_MonthYear_StratifiedSection();
$('#variables').append($('</tr>'));
$('#variables').append($('</table>'));
$('#variables').trigger('create');
}
function AddDate_MonthYear_StratifiedSection() {
table_html = '<td style="min-width: 200px;"><input name="name1" id="id1" value="" class="date-picker"></td>';
$('#variables').append(table_html);
}
above code is how am implemeting it but it doesnt work. am using firefox version 24.
on window load i call the preload function that calls the LoadSectionStratified function
I think it may be because it's a newly appended DOM element, rewrite your $('.date-picker') as:
$(document).on('focus', '.date-picker', function() {
$(this).datepicker({
//Options
});
});
Which will listen to the entire document for any $('.date-picker') which currently exists. I've added a demo with your Code for example:
Fiddle: http://jsfiddle.net/dHYfv/5/
As Juhana mentions, it'll be cleaner to initialise it upon appending it to the DOM, Adjust:
var opts = {
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));
}
};
function AddDate_MonthYear_StratifiedSection() {
var table_html = '<td style="min-width: 200px;">'+
'<input name="name1" id="id1" '+
'value="" class="date-picker" />'+
'</td>';
$('#variables').append(table_html)
.find('.date-picker')
.datepicker( opts );
}
Fiddle: http://jsfiddle.net/dHYfv/6/