mahesh213 says:
1)type=date(in that i am going to choose date )
Its ok.
mahesh213 says:
If dateformat=mm-yy then i am going to dispaly year and month
It is not possible to change the format of input type Date.
TextBox with TextMode Date only supports the yyyy-MM-dd format.
You can't change the format.
Instead of Date type use type text and let the user to select in required format.
The browsers that do not support TextMode Date will show as 2019-08-13, but on browsers that support it will display accordingly.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult getAll()
{
List<Details> employeeList = new List<Details>();
employeeList.Add(new Details { RSId = 1, RId = 1, CName = "Item", CType = "Dropdown", FromTable = "MA_RAI", DisplayCName = "RAI_Name", ValueCName = "RAI_Id", Date = null, Dateformat = "" });
employeeList.Add(new Details { RSId = 2, RId = 1, CName = "From", CType = "DatePicker", FromTable = null, DisplayCName = null, ValueCName = null, Date = "Today", Dateformat = "yy-mm-dd" });
employeeList.Add(new Details { RSId = 3, RId = 1, CName = "To", CType = "DatePicker", FromTable = null, DisplayCName = null, ValueCName = null, Date = "Yesterday", Dateformat = "mm-dd" });
employeeList.Add(new Details { RSId = 4, RId = 1, CName = "Name", CType = "Textbox", FromTable = null, DisplayCName = null, ValueCName = null, Date = null, Dateformat = null });
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
public class DDLOptions
{
public string Text { get; set; }
public int Value { get; set; }
}
public class Details
{
public int RSId { get; set; }
public int? RId { get; set; }
public string CName { get; set; }
public string CType { get; set; }
public string ValueCName { get; set; }
public string DisplayCName { get; set; }
public string FromTable { get; set; }
public string Date { get; set; }
public string Dateformat { get; set; }
public List<DDLOptions> DDLValues { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyController", ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
$http({
method: 'POST',
url: '/Home/getAll/'
}).success(function (data, status, headers, config) {
debugger;
for (var i = 0; i < data.length; i++) {
if (data[i].Date != null) {
data[i].Date = new Date(data[i].Date);
}
}
$scope.items = data;
}).error(function (data, status, headers, config) {
$scope.items = 'Unexpected Error';
});
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="container">
<div class="well">
<div ng-repeat="report in items">
<div class="row">
<div class="col-md-2">
<label for="RNo">
{{report.CName}}</label>
</div>
<div class="col-md-3" id="dvDynamic">
<%--Dynamic Controls display based on CType Start--%>
<select class="form-control" ng-model="report.FromTable" ng-show="report.CType.toLowerCase()=='dropdown'"
ng-options="c.Value as c.Text for c in report.DDLValues">
<option value="">Select</option>
</select>
<input type="date" class="form-control" ng-model="report.Date" ng-show="report.CType.toLowerCase()=='datepicker' && report.Dateformat=='yy-mm-dd'" />
<input type="text" class="form-control" ng-model="report.Date" ng-show="report.CType.toLowerCase()=='datepicker' && report.Dateformat=='mm-dd'" />
<input type="text" class="form-control" ng-show="report.CType.toLowerCase()=='textbox'" />
<%--Dynamic Controls display based on CType End--%>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
