How to set Time-picker in MVC 4 - javascript

I need to create a view that includes a field with time only. Can anyone help me on how to create Timepicker in MVC 4 razor.
This is my code:
Model
public TimeSpan TIME_OUT { get; set; }
View
<div class="form-group">
#Html.LabelFor(model => model.TIME_OUT, "End Time", htmlAttributes: new { #class = "col-xs-4 col-sm-offset-1 col-sm-4" })
<div class='input-group date col-xs-8 col-sm-6' id='timeout'>
#Html.TextBoxFor(model => model.TIME_OUT, new { #class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
</div>
JavaScript:
$(function () {
$('#timeout').datetimepicker({
format: 'LT'
});
});
This is the result of my code:
But when I click the time icon, it doesn't show the result I want
This is what I want to do in my timepicker

You can use bootstrap time picker, and set it by this Jquery
$("#YourId").timepicker("setTime", '');
Refer this Bootstrap Timpicker examples,
https://eonasdan.github.io/bootstrap-datetimepicker/
responsive-bootstrap-3-timepicker
http://tarruda.github.io/bootstrap-datetimepicker/

Related

Datetimepicker client side validation for start and end date

I have 2 datetimepickers that I'm using and I'm setting the default date on each of them when the page loads. One is the start time (#datetimepicker1), the other is the end time (#datetimepicker2). I have validation in place for when the user changes the values. It will validate that the end date is not less than the start date and the start date is not greater than the end date.
This works, however, it does not seem to register the default values, so the validation only works if you click into it and select a new datetime and then go to the other datetimepicker and select a value. Basically, it's treating the default value as null within the validation. Any idea how to make the validation factor in the default values provided?
#using (Html.BeginForm("Graph", "Home", FormMethod.Post))
{
<div class="form-group">
<div class="container">
<div class='col-lg-4 text-center' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker1">From Date:</label>
#Html.TextBoxFor(m => m.datetimepicker1, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker2">To Date:</label>
#Html.TextBoxFor(m => m.datetimepicker2, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</div>
</div>
</div>
}
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 12:00:00 AM"
});
$('#datetimepicker2').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 11:59:59 PM"
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
</script>

datetimepicker date validation using default dates

I have 2 datetimepickers that I'm using and I'm setting the default date on each of them when the page loads. One is the start time (#datetimepicker1), the other is the end time (#datetimepicker2). I also have validation in place for when the time changes, it will validate that the end date is not less than the start date and the start date is not greater than the end date. However, this only works if you click and set a datetime on one of the datetimepickers and then go to change the second one. The default values are filled in but it doesn't seem to know those values exist because I can click on the end time one and it will allow me to set the timestamp to less than the start time picker. Once you manually select a timestamp on one, then the validation works. Is there a way for the validation to see the default dates?
#using (Html.BeginForm("Graph", "Home", FormMethod.Post))
{
<div class="form-group">
<div class="container">
<div class='col-lg-4 text-center' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker1">From Date:</label>
#Html.TextBoxFor(m => m.datetimepicker1, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<label class="control-label col-md-2" style="width:40%" for="datetimepicker2">To Date:</label>
#Html.TextBoxFor(m => m.datetimepicker2, new { #class = "input-group date" })
</div>
<div class='col-lg-4' style="text-align:center">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</div>
</div>
</div>
}
Here's the script part for it:
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 12:00:00 AM"
});
$('#datetimepicker2').datetimepicker({
defaultDate: "#DateTime.Now.ToString("MM/dd/yyyy") 11:59:59 PM"
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
</script>

My DatePicker does not work in all browsers

I have a datepicker that does not work in Safari, Firefox, but that works very well with Chrome, Edge, do I have to change my way or there is a way to adjust my code to keep it DatePicker that I use, but that it adjusts according to the browsers used?
HTML
<div class="row col-md-12">
<div class="form-group">
#Html.LabelFor(m => m.BirthDate, Resource.BirthDate, new { #class = "" })
<div class="input-group">
#Html.EditorFor(model => model.BirthDate, new { htmlAttributes = new { #class = "form-control", #readonly = "true"} })
#Html.ValidationMessageFor(model => model.BirthDate, "", new { #class = "text-danger" })
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
JavaScript
$(document).ready(function() {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
View Model
[Display(Name = "BirthDate")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MMM/yyyy}")]
public DateTime BirthDate { get; set; }
So, users trying to enter their birthdates in a browser different from Chrome and Edge, click in the rectangle and no calendar appears

Apply width to all tags of a certain class

I am new to JavaScript and jquery. I have some Kendo DropDownList that I need to set the list itself to auto expand to the width of the lengthiest item. I have been able to do this per control via the following code:
var dropdownlist = $("#Offeror").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#Offeror").parent().width());
dropdownlist.list.width("auto");
dropdownlist = $("#ReqCertlevel").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#ReqCertlevel").parent().width()-6);
dropdownlist.list.width("auto");
The above code works, but I have to set it via each ID. I have several drop down boxes. So, I would rather set the width of all tags with the DD_List class. I tried the following:
$( ".DD_List" ).each(function( index, object ) {
var dropdownlist = object.data("kendoDropDownList");
dropdownlist.list.css("min-width", object.parent().width());
dropdownlist.list.width("auto");
});
It is not working. What am I doing wrong? I am open to a CSS solution as well.
Edit:
Basically I am trying to turn:
Into:
Here is the code in the view:
<div class="form-group">
#Html.LabelFor(model => model.Offeror, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(
Html.Kendo().DropDownList()
.HtmlAttributes(new { #style = "width: 125px;", #class = "DD_List" })
.Name("Offeror")
.SelectedIndex((int)Model.Offeror)
.BindTo(Enum.GetNames(typeof(EnumQuoteOfferor)).ToList())
)
#Html.ValidationMessageFor(model => model.Offeror, "", new { #class = "text-danger" })
</div>
</div>
When the page is rendered in the browser, here is what the view source has for that control:
<div class="form-group">
<label class="control-label col-md-2" for="Offeror">Offeror</label>
<div class="col-md-10">
<input class="DD_List" data-val="true" data-val-required="The Offeror field is required." id="Offeror" name="Offeror" style="width: 125px;" type="text" />
<script>
jQuery(function () { jQuery("#Offeror").kendoDropDownList({ "dataSource": ["AmptechInc", "AmptechEnergySystemsInc", "AmptechTechnicalServicesInc"], "index": 0 }); });
</script>
<span class="field-validation-valid text-danger" data-valmsg-for="Offeror" data-valmsg-replace="true"></span>
</div>
</div>
The wrong lines are:
var dropdownlist = object.data("kendoDropDownList");
dropdownlist.list.css("min-width", object.parent().width());
This because jQuery#each has two arguments, the second one is a dom element and not a jQuery element.
So, change to:
$( ".DD_List" ).each(function( index, ele) {
var dropdownlist = $(ele).data("kendoDropDownList");
dropdownlist.list.css("min-width", $(ele).parent().width());
dropdownlist.list.width("auto");
});

Double clicking error with JQuery and ASP MVC

Good morning!
I have a checkbox in my Razor and it shows a div with a datepicker when the check box is checked.
My error is when I double click the checkbox shows the div with the datepicker when is not checked (Do the opposite of what I need).
Here is my code:
<div class="form-group">
#Html.LabelFor(model => model.SupHUBZoneCertified, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
<div class="checkbox" id="cb1">
<label>
#Html.EditorFor(model => model.SupHUBZoneCertified)
#Html.ValidationMessageFor(model => model.SupHUBZoneCertified, "HUB Zone Certified:")
</label>
</div>
</div>
</div>
<div class="form-group" id="dateCb1" style="display:none">
#Html.LabelFor(model => model.SupCategoryHUBZoneDate, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.SupCategoryHUBZoneDate, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.SupCategoryHUBZoneDate, "", new { #class = "text-danger" })
</div>
</div>
and my javascript:
$("#cb1").click(function () {
$("#dateCb1").toggle(this.checked);
});
Assuming that you're using a jQuery UI datepicker, I can't see the toggle method in the api docs
There are only show and hide methods.
So you should modify your code:
$("#cb1").click(function () {
var action = this.checked ? "show" : "hide";
$("#dateCb1").datepicker(action);
$("#dateCb1").toggle(this.checked);
});
Thank you all I found the error, so basically I can't use the #cb1 as the checkbox ID because I need to use the ID of the input.
The ID for the input is self generated in ASP MVC and use the name declared in the MVC model.
So the code would be
$("#SupHUBZoneCertified").click(function () {
$("#dateCb1").toggle(this.checked);
});
I found the input class name using "Inspect Element in Internet Explorer"

Categories