I am trying to do a date picker in jQuery. I put these within the head tag:
<link rel="stylesheet" type="text/css" media="screen" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<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));
}
});
});
</script>
And from this part of my code in JavaScript is calling the date picker:
case "mhc":
if (mhc_overlay == null) {
mhc_overlay = new google.maps.HeatmapLayer();
}
if (!mhc_overlay_visible) {
mhc_overlay_visible = true;
$("#MHC").removeClass("menuLink");
$("#MHC").addClass("menuLink_selected");
visibleOverlays.push("mhc");
var content = "";
content += "<label for='startDate'>Date :</label>";
content += "<input name='startDate' id='startDate' class='date-picker' />";
filterWindowContent.push({ id: "mhc", label: label, content: content });
showFilterWindow();
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
addToCurrentOverlayList("loadedmhc", "mhc", "MHC Live Map");
}
break;
There is no error message showing but just that the date picker does not show calendar when selected. I wonder why is it so.
Thanks in advance.
You are adding the textfield dynamically in the document. So you need to call the datepicker() function after showFilterWindow() function. I think after that it will work properly. Put your jQuery datepicker function in a separate function. Like this:
function showdatepicker() {
$('.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));
}
});
}
and call this showdatepicker() function after showFilterWindow() function. Like this:
case "mhc":
if (mhc_overlay == null) {
mhc_overlay = new google.maps.HeatmapLayer();
}
if (!mhc_overlay_visible) {
mhc_overlay_visible = true;
$("#MHC").removeClass("menuLink");
$("#MHC").addClass("menuLink_selected");
visibleOverlays.push("mhc");
var content = "";
content += "<label for='startDate'>Date :</label>";
content += "<input name='startDate' id='startDate' class='date-picker' />";
filterWindowContent.push({ id: "mhc", label: label, content: content });
showFilterWindow();
showdatepicker();
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
addToCurrentOverlayList("loadedmhc", "mhc", "MHC Live Map");
}
break;
I think it will work. If not, please share a link so I can check it online.
You need to add jquery library before calling jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Related
I able to make today date appear at the check-in date, but the problem is the user still be able to choose the date before today date. Is that any solution can allow me to solve his problem? Any suggestion will be a great help, thanks !
$(function () {
$("#chkI").datepicker({
dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$("#chkO").datepicker("option", "minDate", newMin);
}
});
var currentDate = new Date();
$("#chkI").datepicker("setDate", currentDate);
$("#chkO").datepicker({ dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$("#chkI").datepicker("option", "maxDate", newMax);
}
});
});
This is how I disable dates before today :
$("#chkI").datepicker({
minDate: new Date()
});
e.g. jsfiddle
You just need to set minDate and don't initialize datepicker again for same input
$(function () {
$("#chkI").datepicker({
minDate: new Date(), // start date should be today's date
dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$("#chkO").datepicker("option", "minDate", newMin);
}
}).datepicker("setDate", new Date()); // select today's date by default
//var currentDate = new Date();
//$("#chkI").datepicker("setDate", currentDate);
$("#chkO").datepicker({ dateFormat: "yy-mm-dd", showAnim: "slideDown",
onClose: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$("#chkI").datepicker("option", "maxDate", newMax);
}
});
});
<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>
<input type="text" id="chkI">
<input type="text" id="chk0">
I am selecting the multi date using jQuery datepicker but I don't want to select the same date twice. It's pretty hard to explain this.
I created a demo which can help you guys to understand much better.
$(function() {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "MM yy",
onClose: function(dateText, inst) {
var months = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, months, 1));
var monthSelect = $("#monthSelector").val();
var d = new Date(monthSelect).getTime();
$("#month").val($("#month").val() + d + ",");
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="monthSelector" class="date-picker">
<input type="text" id="month">
store each date in an array and check for duplication each time an "add new date" event occure
$(function() {
var dateArray = []; // for storing selected date as an array
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "MM yy",
onClose: function(dateText, inst) {
var isNotDuplicated = true; // for checking duplicated
var months = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, months, 1));
var monthSelect = $("#monthSelector").val();
var d = new Date(monthSelect).getTime();
// each time we have a new selected date, we check it for duplicated before using it
for(let dd of dateArray) {
if(d == dd) {
// new selected date is duplicated, so we set flag isNotDuplicated to false, that will cause logics below to ignore it.
isNotDuplicated = false;
break;
}
}
if(isNotDuplicated) {
// new date is not duplicated, so we use it.
dateArray.push(d);
$("#month").val($("#month").val() + d + ",");
}
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="monthSelector" class="date-picker">
<input type="text" id="month">
I have the following jQuery which gives me the current date and the populates the enddate 7 days from the selected date. I would like for the user to only be able to select mondays from the datepicker. Can this be done the way in which I have my code?
$(document).ready(function () {
$("#WeekCommencing").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
// MondayOnly: function(date){ return[(date.getDate() == 1),""];},
onSelect: function (date) {
var date2 = $('#WeekCommencing').datepicker('getDate');
date2.setDate(date2.getDate() + 7);
$('#WeekEnding').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#WeekEnding').datepicker('option', 'minDate', date2);
}
});
$('#WeekEnding').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#WeekCommencing').datepicker('getDate');
console.log(dt1);
var dt2 = $('#WeekEnding').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#WeekEnding').datepicker('option', 'minDate');
$('#WeekEnding').datepicker('setDate', minDate);
}
}
});
});
You should add as function name beforeShowDay
beforeShowDay : function(date){ return[(date.getDay() == 1),""];}, //Monday Only Function
and that should work.
I am using jquery datepicker as monthpicker and it is working but the only problem is if I select one month from calander then it shows that month in the input field, but when i click on that input field again then it doesn't show selected month but it shows current month.
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
JS
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
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));
console.log('Done is pressed')
}
}
});
});
Here is the fiddle for my question.
http://jsfiddle.net/DBpJe/5103/
You would have to alter beforeShow like below and also since the months names are in String you would have to have an array like this to map the month against number
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
beforeShow: function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
datestr = datestr.split(" ");
year = datestr[1];
month = monthNames.indexOf(datestr[0]);
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
$(".ui-datepicker-calendar").hide();
}
}
Here is demo 1
Or you can use this much better looking method to convert month to number
function getMonthFromString(mon){
return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}
Courtesy: SO answer
Here is demo 2
Added a new function as well: restrict the to date is later than from date,
<script type="text/javascript">
$(function() {
$( "#from, #to").datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showOn: "button",
buttonImage: "../../static/calendar.gif",
buttonImageOnly: true,
//buttonText: "Select date",
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 isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
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)).trigger('change');
$('.from').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
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', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
}
else{
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
}),
<!--reset-->
$(".reset").click(function() {
$(this).closest('form')[0].reset()
});
});
</script>
Try like that
$('#startDate').datepicker({
dateFormat: 'mm/yy'
});
Edit:
I saw now what you said. The same is going on with that ^
There is a way to do this by setting currentdate to the datetimepicker
$("#datepicker").datepicker("setDate", currentDate);
Here is the working sample JQFAQ Topic.
2 datepickers fromdate and todate
My requirement is to select a fromdate and the todate should not be more than 30 days from the selected fromdate, so when I pick a fromdate it should only enable next 30 days in todate datepicker.
i tried to implement this facility to these datepickers but not working
//from date
$("#txtTFromDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate : '0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'maxDate',jQuery('#txtTToDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
//to date
$("#txtTToDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate :'0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'minDate',
jQuery( '#txtTFromDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
Please help me to get rid of this.
jQuery Datepicker - Force range from selected date
http://codepen.io/anon/pen/vENJWd
// From Datepicker
$( "#from" ).datepicker({
defaultDate: "+1d",
changeMonth: false,
numberOfMonths: 1,
minDate: "+1d",
onClose: function(selectedDate) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
// Change value of second parameter for your needs
// 7 = One Week, 14 = Two Weeks, etc
$( "#to" ).datepicker( "option", "maxDate", new_date(selectedDate, 30) );
}
});
// To Datepicker
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1
});
// Do not edit below this line
function new_date(old_date, days_after) {
var month = parseInt(old_date.substring(0, 2))-1;
var day = parseInt(old_date.substring(3, 5));
var year = parseInt(old_date.substring(6, 10));
var myDate = new Date(year, month, day);
myDate.setDate(myDate.getDate() + days_after);
var newMonth = myDate.getMonth()+1;
var newDay = myDate.getDate();
var newYear = myDate.getFullYear();
var output = newMonth + "/" + newDay + "/" + newYear;
return output;
}
// Created By: Rafael Leonidas Cepeda
I think this will work for you...
$(function () {
$("#datepicker1, #datepicker2").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 30);
$("#datepicker2").datepicker("setDate", date2);
});
});
html
<p>Date1: <input type="text" id="datepicker1" /></p>
<p>Date2: <input type="text" id="datepicker2" /></p>