I want to show date in dd/mm/yyyy format but it always shows mm/dd/yyyy format. Also I want to set a default date to my control on page load
My view has:
<div class="col-md-4 col-sm-4 ">
@(Html.Infragistics().DatePicker()
.ID("TDate")
.ButtonType(TextEditorButtonType.DropDown)
.Render())
<input type="hidden" value="@ViewBag.TDate" id="hdnFlag" name="hdnFlag" />
</div>
My controller has :
public ActionResult Index()
{
ViewBag.TDate = "16-MAR-2017";
return View();
}
My javascript to set the default value is:
$(document).ready(function () {
var h1 = document.getElementById('hdnFlag');
if (h1 != null) {
h1 = h1.value.replace("-", " ");
h1 = h1.split("-").join(" ");
var twd = new Date(h1);
twd.toLocaleDateString("en-GB");
var d = twd.getDate();
var m = twd.getMonth();
var y = twd.getFullYear();
$("#TDate").igDatePicker({
value: new Date(y, m, d),
dateDisplayFormat: "dd/MM/yyyy",
minValue: new Date(y - 1, m, d)
})
});
I am not able to set the date correctly also if I change the date it shows in mm/dd/yyyy format.
Can anyone please help?
Regards
Singh
Hello Singh,
Thank you for using our community.
I have created a basic MVC sample for you in order to show you how to display the value in the desired format. I’m not sure why you are initializing two times the editor. Here is a sample code that should help you:
.Value("16-MAR-2017")
.DateDisplayFormat("dd/MM/yyyy")
.DateInputFormat("dd/MM/yyyy")
Please let me know if this is working for you.
Best Regards, Marina Stoyanova, Software Developer, Infragistics, Inc.
Hi,
Thanks for your reply.
I am doing this because I want to set the default date to the control and I am getting this date(16-MAR-2017 OR 16/03/2017) from the DB therefore I have set that date in the controller to the Viewbag. I want to set the minimum date to be only 1 year back of the above DB date so that the user cannot choose a date which is more than 1 year old therefore I need to break the date so that I can pass it as:
minValue : new Date(y -1 , m, d)
I am attaching my sample solution. Can you please have a look a suggest. I have tried to set .dateInputFormat as you suggested but that didn't help much.
You only need to initialize the editor once. If you initialize it a second time, you will overwrite the set options. If you want to apply option on runtime, you need to set it as shown in our online API https://www.igniteui.com/help/api/2017.1/ui.igdatepicker#options:minValue
I have isolated your case in a basic sample (look at the Home/index.cshtml file) in order to show you how to do this.
Hi Marina,
It works now but when I hover over the date in the control the date disappears when I move my mouse away it comes back.
Is it some in-built style? Can I change it to always show it regardless of hover?
I have tried to reproduce the issue that you are facing but the date does not disappear when the control is hovered. I guess this behavior is caused by some custom css that you are using. Is it possible for you to provide an isolated sample that reproduces this issue so that we would be able to investigate it?
Best regards, Alexander Marinov,Infragistics
Hi Aexander,
I will send you one soon.
I also want to highlight the datepicker if a different date is chosen instead of the current date. So I have written the below code if the text changes:
$("#TDate")[0].currentStyle.borderTopColor = "red";
This doesn't seems to work. Can you please suggest the correct syntax?
I want the whole border to be highlighted red and not just the top.
Can you please try using the following:
$(".ui-igedit-container").css("border-color", "red")
Please, let me know if this does the work for you!
Regards, Alexander
Can you please create a new topic about this issue in the 'igHierarchicalGrid' section of the forums -> https://ko.infragistics.com/community/forums/589.aspx
The team that is working on the igGrid will assist you and will provide you the best solution for your project.
Best regards,Alexander
Thanks Alex
I have one more similar issue
I have a hierarchical grid and I am saving changes in the child level grid. The child level grid has 2 dropdowns and 1 free text box .
If one of the dropdowns is changed I want to check if either of the other 2 controls have been changed or not. If not then I have to show a message box and highlight those controls.
I am able to find out pending transactions on the child level and find out if 1 dropdown is changed then others are missing or not and show the message but not able to highlight the dropdown and free text box which are missing in the pending transactions array:
var childrenTransactions = grid.igHierarchicalGrid("allChildren");
var pendingTrans = childrenTransactions.igGrid("pendingTransactions")
I am able to iterate through the pending transactions array using the above code.
Can you please suggest something?
I am glad that it helped you with your scenario!
Best regards,Alex
Thank you Alex
It works now!