w2ui grid inline edit (date range validations) - grid

Can anyone suggest how to put date range validations in w2ui grid inline edit (Calendar should display date after start date)
Any hint or suggestions would be appreciated
Thanks

Kindly use following code to put date range validations in w2ui grid inline edit
onDblClick: function (event) {
var editable = w2ui['grid'].columns[event.column].editable
if (editable !== undefined) {
w2ui['grid'].columns[event.column].editable = { type: 'date', start: startdate };
w2ui['grid'].refresh();
}
}
here startdate is date from where you want to set your calender

Related

date validation in ASP.net

im creating a hotel booking system using asp.net. I'm using drop down list to allow user to choose the days and month. Lets say today's date is 15/2. but my system allow user to choose the date before that. How do i prevent user from choosing dates before the current date?
try JQuery DatePicker :-(You'll Find Solution Here)
http://allittechnologies.blogspot.in/2015/05/aspnet-choose-date-by-using-jquery-in-software-it-technologies.html
You can use jquery datepicker and use the on select event.
$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);
if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});
This is a jsfiddle demo

How to make kendoDatePicker popup

I have two kendo date pickers. I want to be able to make the other one popup after a date is selected on the first one. Here is my code snippet:
$(this.oParentDiv.find('.datePicker')).kendoDatePicker({
format: "yyyy-MM-dd",
change: function (e) {
if (e.sender.element.context.className.indexOf("fromDate") != -1) {
$(".toDate").val(moment(this._value).format('YYYY-MM-DD'));
//Code to make toDate popup comes here
}
}
});
How can I make the toDate popup after a date has been selected in the fromDate?
There is an open method on date picker instances. You can call it like this from within your change function after you set the second picker's value:
$(".toDate").data("kendoDatePicker").open();

MVC: How to get date time value to edit

I want to set editable a date time in Edit page. As you can in the image the other datas shown in the fields, date time value is not shown. Here is my code to show date time value :#Html.TextBoxFor(model => model.CommunicationTime, new { Value = Model.CommunicationTime, type = "date" })
I am sure of my date time value is not empty. What should I do?
Use jquery datepicker then change your TextBoxFor like below:
#Html.TextBoxFor(model => model.CommunicationTime, new {#id = "yourdatepicker", #Value = Model.CommunicationTime.Value.ToString("MM/dd/yyyy")})
<script>
$('#yourdatepicker').datepicker();
</script>
Do you want a date or datetime? As an HTML5 input type, datetime is only supported in Opera and Safari. Otherwise, you'd need to use jquery datepicker and a timepicker.
You should change type to datetime like this : type = "datetime"
#Html.TextBoxFor(model => model.CommunicationTime, new { Value = Model.CommunicationTime, type = "datetime" })

ASP.NET mvc: How to automatic fill the date field with today's date?

Assume that a model has a datetime datatype.
So in view there will be a blank field ask you to input datetime.
Is there a way to fill this HTML field with today's date/datetime as default value?
model.SomeDateField = DateTime.Now();
return View(model);
Simple
<%: Html.TextBox("date", DateTime.Now.ToShortDateString()) %>
Or use javascript to get the client's browser date. Better yet use jquery's datepicker for nice UI for selecting dates. With it you can also prepopulate the default date:
/**
Enable jquery UI datepickers
**/
$(document).ready(function () {
$(function () {
$(".date-select").datepicker({ dateFormat: 'dd.mm.yy' });
$(".date-select").datepicker($.datepicker.regional['sl']);
});
$(function () {
$("#someDateField").datepicker('setDate', new Date());
});
});
Wanted to add what I found that I needed for filling a datepicker with today's date that was being generated from the DateTime data type in HTML5 (via razor at the view in the value attribute) which is this:
#Html.TextBoxFor(model => model.YourDateInModel, new { #id = "YourDateId", #type = "date",
#Value = DateTime.Now.ToString("yyyy'-'MM'-'dd") })
Note that the ToString() format was necessary to get it to show the date in the datepicker field (it requires a database format).
Source: https://forums.asp.net/p/2154640/6320474.aspx?p=True&t=637376668781782563
Edit: This ended up leaving the database blank/null by itself, so I also had to set the model with the initial value of today's date (as mentioned above).
public DateTime YourDateInModel { get; set; } = DateTime.Now;
In my case I needed both. It may also be helpful to use something like:
$("#YourDateId").prop("disabled", true);
If you are using JQuery/Javascript to prevent changes to the field where applicable.

JQuery updating label

I have 2 textboxes and a label on my page. The 2 textboxes will contain numeric values. The label text will be the product of the 2 textbox values. Is there a way to do this using JQuery so that the value can get updated when I edit the textboxes without having to do a postback?
Also the textboxes may contain values with commas in it: e.g. 10,000. Is there a way I can extract the number from this so that it can be used to calculate the label value.
Thanks in advance,
Zaps
I can't add comments to other answers yet, so I'll just post an update here.
The original question involved product, which means multiplication, so here's a version that allows for unlimited textboxes and completes the multiplication.
function makeInt(text) {
return parseInt(text.replace(',', ''));
}
$(function(){
//hook all textboxes (could also filter by css class, if desired)
//this function will be called whenever one of the textboxes changes
//you could change this to listen for a button click, etc.
$("input[type=text]").change(function(){
var product = 1;
//loop across all the textboxes, multiplying along the way
$("input[type=text]").each(function() {
product *= makeInt($(this).val());
});
$("#display-control-id").html(product);
});
});
$('#SecondTextbox').keyup(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $(this).val();
var result = t1+t2;
$('#resultLabel').html(result);
});
This could do the trick, or you could have it on a click event with some link element. This would also not have any page refresh.
$('#checkButton').click(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $('#SecondTextbox').val();
var result = t1+t2;
$('#resultLabel').html(result);
});
Link could be something like,
<a id="checkButton" title="Check your result">Check</a>
And with that you would have the css settings of 'cursor:pointer;' to make it seem a proper link.

Resources