I have created one custom control for datetime picker in one control i have given three mode datetimepicker,timepicker and datepicker.For which i have created one property called CalenderMode of type enum which stores these three modes and which value i am given to the property according to that i am changing the datetimepicker,if i given timepicker then my timepicker is enabled,if i give datepicker then date picker is enabled and if i give datetimepicker then my datetimepicker is enabled this i am handling in jquery.
For validation of these i am given format from c# and that format i am using in client side but now problem is if my timepicker or date picker is enabled and from timepicker i am selecting time but in text box it showing date time this is same for the date picker also there also it is showing date time.
Here i am not understanding what is the issue.
My code of jquery where i am changing the mode of calender using assigning the value to property is
$(document).ready(function () {
$('.calendercssclass').each(function () {
var result;
var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
if (value == "timepicker") {
$(this).datetimepicker({
timepicker: true,
datepicker: false
//mask: true
});
}
else if (value == "datepicker") {
$(this).datetimepicker({
timepicker: false,
datepicker: true
// mask: true
});
}
else {
$(this).datetimepicker({
//mask: true
});
}
});
});
To give the format for validation i am using following code
function ValidateFormatOfDatecontrol(sender, args) {
debugger;
args.IsValid = true;
var format;
$('.calendercssclass').each(function () {
var result;
var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
if (value == "timepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientTimeFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
else if (value == "datepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
else if (value == "datetimepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateTimeFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
});
}
server side code for giving format for validation is
this.clientDateFormat.Value = "MM/DD/YYYY";
this.clientDateTimeFormat.Value = "mm/dd/yyyy H:i A";
this.clientTimeFormat.Value = "H:i";
Screenshot for issue is
Can anybody help me for this?
Here You are using Rain Jquery so fromat of Rain for the time is different from the moment what you are using for the validation so following is the format for both
Rain Jquery Time Format : h:i A
Moment Time Format : h:mm A
Following is the sample code
Script
$(document).ready(function () {
$(".date").datetimepicker({
format: 'h:i A',
datepicker:false
});
$(".date").change(function () {
var format = "h:mm A";
$('#message').text(moment($(".date").val(), format, true).isValid());
});
});
Markup
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="date"></asp:TextBox>
<asp:Label ID="message" runat="server" CssClass="message"></asp:Label>
</div>
Related
I have an issue with the eyecon datepicker (http://www.eyecon.ro/bootstrap-datepicker). I want it ('#date') to re-render (disabling different periods) each time I change the value on the select ('#room').
$(document).ready(function(){
var openDays = <?php echo json_encode($area_open_days); ?>;
$('#room').change(function(){
var room = $(this).val();
$("#date").datepicker({
onRender: function (date) {
if(openDays[room][date.getDay()] == 1)
return '';
else
return 'disabled';
}
}).data('datepicker');
});
});
Outside of the $('#room').change the code works, but of course doesn't update when I select a new value, so I think I need to re-render the datepicker... any help? Thanks!
This is my code
//Put our input DOM element into a jQuery Object
var $jqDate = jQuery('input[name="jqueryDate"]');
//Bind keyup/keydown to the input
$jqDate.bind('keyup','keydown', function(e){
//To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
if(e.which !== 8) {
var numChars = $jqDate.val().length;
if(numChars === 2 || numChars === 5){
var thisVal = $jqDate.val();
thisVal += '/';
$jqDate.val(thisVal);
}
}
});
<div style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 150%;">
<strong>HTML5 "date" input type:</strong> <input type="date" name="html5date"><br>
<strong>jQuery "date" input type mimic:</strong> <input type="text" name="jqueryDate" placeholder="dd/mm/yyyy"><br>
Key Input: <span id="keyP">null</span>
</div>
In the above code i have a textbox . In that textbox user enter date manually . It takes date format worked . But user enter day more than 31 and month 12 it not accept.How to restrict date and month by using Jquery or Javascript.
This is Jsfiddle :- https://jsfiddle.net/ChrisCoray/hLkjhsce/
You Need to add 'datePicker'as class name
$(".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"
});
// validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
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!"
);
});
I'm checking a date entered with a datepicker control in jquery from an Html.TextBoxFor helper:
<%=Html.TextBoxFor(c => Model.mydate, new { #class = "datepicker", maxlength = 10, #onBlur = "chkDate"})%>
The datepicker mask for the textbox appears to be MM/DD/YYYY . So, my script checks for an underscore and displays an error. This works if the user igonores the datepicker and tries to enter a date freehand but not if the datepicker is used. When a date is chosen, the value passed to my script is still underscores and no value. Here's my script:
<script type="text/javascript">
$(document).on("blur", "input[name=mydate]",
function chkDate() {
var len = $("input[name=mydate]").val().length;
var date = $("input[name=mydate]").val();
var month = date.slice(0, 2);
var day = date.slice(3, 5);
var year = date.slice(6, 10);
alert("chkBirthday " + month);
if (month == '__') {
document.getElementById("MainContent_ErrorMessage").visibility = 'visible';
document.getElementById("MainContent_ErrorMessage").innerHTML = 'No date has been entered. Please enter a date';
}
});
There's an event onChange associated with datepicker. Is this what I should be using? If so, how do I specify that in my helper and what script changes do I need to make?
Try this,
$(document).on("change", "input[name=mydate]",function (){
var len = $(this).val().length;
var date = $(this).val();
var month = date.slice(0, 2);
var day = date.slice(3, 5);
var year = date.slice(6, 10);
alert("chkBirthday " + month);
if (month == '__') {
document.getElementById("MainContent_ErrorMessage").visibility = 'visible';
document.getElementById("MainContent_ErrorMessage").innerHTML = 'No date has been entered. Please enter a date';
}
});
Assuming you are using the popular JQuery UI's Datepicker, weirdly enough they are not entitled events but callbacks that can handle this event. See onSelect or onClose.
I have a jsp code which on submit calls this function
function filterExcessPage() {
setDefaultValues();
var fromLast =document.getElementById('fromLast').value;
var fromDate =document.getElementById('fromDate').value;
var toDate =document.getElementById('toDate').value;
$("#excessListForm").submit(function() {
if((toDate.length>0) && (fromDate.length==0)) {
$('#validateDate').text('*from date is mandatory');
return false;
}else if ((fromDate.length>0) && (new Date(fromDate)>new Date())) {
$('#validateDate').text('*from date should be less than current date');
excessListForm.fromDate.value="";
return false;
}else if ((toDate.length>0) && (new Date(toDate)>new Date())) {
$('#validateDate').text('*to Date should be less than current date');
excessListForm.toDate.value="";
return false;
}else {
var queryUrl = "/excessManagement.web/inbox.htm?excessFilteredData=true&fromLast=" + fromLast+"&fromDate="+fromDate+"&toDate="+toDate;
excessListForm.action = queryUrl;
excessListForm.submit();
}
});
}
function setDefaultValues() {
excessListForm.cif.value="";
excessListForm.customerName.value="";
excessListForm.fromLast.value="";
excessListForm.fromDate.value="";
excessListForm.toDate.value="";
}
The fromdate and todate values reappear on form submission....
After form submission the values displayed in fromdate,todate textboxes are in the format i am using in my java class ....
I need to set the values to "" after form submission...
set in client side
var fromDate =document.getElementById('fromDate').value;
var toDate =document.getElementById('toDate').value;
fromDate.value= "";
toDate.value =""
I need to call a function by clicking a button. The button is on an aspx page and the function is on a .js page.
This is the code I use for my button:
<asp:LinkButton ID="lnkBTNSubmit" runat="server" CssClass="buttonlink"
OnClick="lnkBTNSubmit_Click" OnClientClick="onBtnSubmitClick();">Submit</asp:LinkButton>
and this is my function:
function onBtnSubmitClick() {
var startDate = document.getElementById('<%= txtATrendStartDate.ClientID %>').value;
var endDate = document.getElementById('<%= txtATrendEndDate.ClientID %>').value;
checkDateRange(startDate, endDate);
}
function checkDateRange(start, end) {
// Parse the entries
var startDate = Date.parse(start);
var endDate = Date.parse(end);
// Make sure they are valid
if (isNaN(startDate)) {
alert("The start date provided is not valid, please enter a valid date.");
return false;
}
if (isNaN(endDate)) {
alert("The end date provided is not valid, please enter a valid date.");
return false;
}
// Check the date range, 86400000 is the number of milliseconds in one day
var difference = (endDate - startDate) / (86400000 * 7);
if (difference < 0) {
alert("The start date must come before the end date.");
return false;
}
return true;
}
Please note that the function is on an another .js page.
To call the function in the other js file you have to include a reference to the js file on your page.
Example:
Put this in your head tag:
"script src="SomeOtherJSFIle.js" type="text/javascript"/script"