Focus is coming on validate datepicker field in jquery and it showing me opening calendar. I want only validate message not popup of datepicker.
A quick hack from your method:
$.validator.addMethod("endDate", function(value, element) {
var startDate = $('#txt_reg_form').val(),
ret = Date.parse(startDate) <= Date.parse(value) || value == "";
if(!ret){ /*IF NOT VALID DATE*/
/*TRY DISABLING DATEPICKER FOR A MOMENT*/
$("#txt_reg_form").datepicker('disable');
/*SET TIMEOUT TO ENABLE IT AFTER 1 SECOND*/
setTimeout(function(){
$("#txt_reg_form").datepicker('enable');
}, 1000);
}
return ret;
}
, "To date should be greater then From date"
);
If a datepicker is associated with a field, it will popup calender on focusing on the field. You can change the default behaviour of showing popup on focus to show it on clicking button/icon by following code:
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
Related
I am using jquery UI date-picker to get the date with min and max date range value, it's working on selecting the date using the date-picker widget, but it gets invalid values using the keyboard. I want to get the date by keyboard as well as mouse. Please help me to get valid date value or to show an error message of the invalid date value.
datepicker
You can use code as below :
<script type="text/javascript">
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
// Here you can set date range
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});
</script>
Demo and full code like this :
https://jsfiddle.net/oscar11/yfjvd200/
I want the datepicker and timepicker not filled when loaded the first time. I want the datepicker or timepicker to filled when the user clicks on the input text of each. Eg user click on timepicker text input then time will be filled
I try use this :
$('#datepicker').val("");
$('#timepicker').val("");
But it does not work
How can I do it?
You found the right trick!
$('#datepicker').val("");
$('#timepicker').val("");
But you are not doing it at the right moment. Place that AFTER the pickers have been instanciated.
To fill the time on focus, add this .on() to timepicker:
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
})
.on('focus', function(e){
if( $(this).val() == "" ){
$(this).data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
Fiddle
You just need to write these lines to end of your function :
$('#datepicker').val("");
$('#timepicker').val("");
You can use this code :
$(function () {
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
});
$('#datepicker').val("");
$('#timepicker').val("");
});
Have a look at this fiddle https://jsfiddle.net/lamp03/yfjvd200/9/. I have commented some lines
$(function () {
//$('#datepicker').val("");
//$('#timepicker').val("");
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
//.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
//minDate: moment().add(300, 'm'),
}).on('dp.change', function(e){ $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));});
});
i have dropdown for selecting data type of data in a textbox. dropdown options are like integer, decimal,string,date.
everything is working fine except one thing that is am unable to get a datepicker to the text box when dropdown is selected to date.
tried something like but failed to achieve
$(function () {
$(".date1").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1
});
});
$("#<%=ddlDataType.ClientID %>").change(function () {
if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date") {
$("#<%=txtDefaultValue.ClientID%>").prop("class", "date1");
}
else {
$("#<%=txtDefaultValue.ClientID%>").prop("class", "");
}
});
what is the possible way to achieve this.
If you want to remove it (keep it enable for other purpose) then you can use destroy method
$("#<%=txtDefaultValue.ClientID%>").datepicker("destroy");
else
You can set option enable and disable, on change event of ddlDataType drowndown list.
$("#<%=txtDefaultValue.ClientID%>").datepicker('enable');
$("#<%=txtDefaultValue.ClientID%>").datepicker('disable');
alternative you can also set options to enable disable datepicker
//To enable
$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", false );
//To disable
$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", true );
If you just want your datepicker to be shown or hidden, you can try this code (assuming you are using jQuery).
if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date")
{
$(".date1").css("display", "block");
}
else {
$(".date1").css("display", "none");
}
I have a question on how to make sure whenever this hidden value changed, the datepicker will reload. Because the datepicker will used the hidden value to highlight the days. So whenever the hidden value changed, the highlighted days in datepicker also will change.
Here my code so far. $("#dates").val() is a hidden value. sample of the value is 2013/11/11-2013/11/17. This value will highlight the whole week (mon-sun). There's a previous and next button, which will changed the $("#dates").val() by week eg:
2013/11/18-2013/11/24, 2013/11/25-2013/12/1
I have no problem to trigger if the hidden value is changed, the problem is I want the datepicker to reload once the hidden value changed. so that the highlighted week while changed accordingly. currently whenever the hidden value change, the highlighted week will remain the same.
I did try to used $( "#datepicker" ).datepicker( "refresh" ); whenever the hidden value changed, but still no luck. Please help me. Thanks
$(document).ready(function() {
var dates = $("#dates").val();
var lt = dates.split("-");
var ts = lt[0].split("/");
var te = lt[1].split("/");
var date1 = new Date(ts[0], ts[1]-1, ts[2]);
var date2 = new Date(te[0], te[1]-1, te[2]);
$(function(){
$('#datepicker').datepicker({
dateFormat: 'yy/mm/dd',
beforeShowDay: highlightDays,
onSelect: function(dateText, inst) {
$("#showdaybtn").addClass("fcurrent");
$("#showweekbtn").removeClass("fcurrent");
$("#showmonthbtn").removeClass("fcurrent");
$('#type').val('1');
var p = $("#gridcontainer").swtichView("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(dateText);
$("#hdnTempData").val(dateText);
}
showhideToday('day');
glbView = "day";
}
});
function highlightDays(date) {
if (date >= date1 && date <= date2) {
return [true, 'highlight', 'tooltipText'];
}
return [true, ''];
}
});
});
//to check if the hidden value changed
$(document).on('change', '#dates', function () {
$( "#datepicker" ).datepicker( "refresh" );
});
I am having a confirmation box with a input field requesting a date. When the confirmation box appears, the input box is in focus. How do I unfocus it? I need to drop down a calendar when I click on the input field. Here is my relevant code:
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
document.getElementById('dialog').focus();
$("#dialog").dialog({
buttons : {
"OK" : function() {
window.location.href = targetUrl+"/"+"deletedDate"+"/"+document.getElementById('deletedDate').value;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
function datepicker(){
$( "#deletedDate" ).datepicker(
{
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showAnim: "slideDown"
});
}
This should do the trick:
.blur();
(as was pointed out - this is sufficient)
You can also trigger blur as an event
document.getElementById('dialog').blur();
Or
$('#dialog').blur();
Use blur() event.
document.getElementById("dialog").blur();