I'm trying to use bootstrap-datetimepicker from datetimepicker, but when the date picker is displayed, this covers the input.
The code that I use is something like this:
<div class="col-md-6" >
#Html.LabelFor(model => model.BeginDate)
<div class="form-group" id="">
#Html.TextBoxFor(model => model.BeginDate, new { #class = "form-control" , #id="datetimepicker"} )
</div>
#Html.ValidationMessageFor(model => model.BeginDate)
</div>
I initialize the Datetimepicker like this:
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker({
defaultDate: '',
showTodayButton: true,
format: 'dd-mm-yyyy',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15,
autoclose: true,
startView:3,
minView: 2,
language: 'es'
});
});
Bootstrap v3.0.2
ASP MVC 5
I believe your issue is because you are missing a div wrapping your control the class “input-group”. This gives it a relative position which is required as the picker is positioned absolute.
The docs have the following example
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar</span>
</span>
</div>
</div>
https://eonasdan.github.io/bootstrap-datetimepicker/
Related
I try to use https://tempusdominus.github.io/bootstrap-4/ in ASP.NET MVC project.
HTML
<div class="input-group date" data-target-input="nearest">
#Html.TextBoxFor(model => model.TimeEnd,
new { #class = "form-control form-control-sm datetimepicker-input",
#data_toggle = "datetimepicker",
#data_target = "#TimeEnd",
type="text"
})
<div class="input-group-append" data-target="#TimeEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
Where model.TimeEnd is string in the format dd.MM.yyyy HH:mm
JS
$(document).ready(function () {
$('#TimeEnd').datetimepicker({
locale: 'es',
});
});
When I open page the input has correct value but it is not visible in the datetimepicker.
UPDATE #1
If I set defaultDate via the same model like defaultDate: '#Model.TimeEnd' (where it is string in the format dd.MM.yyyy HH:mm) then the Spanish localization is gone and I see English calendar! Wow.
And the following error appears
moment-with-locales.min.js:1 Deprecation warning: value provided is
not in a recognized RFC2822 or ISO format. moment construction falls
back to js Date(), which is not reliable across all browsers and
versions. Non RFC2822/ISO date formats are discouraged and will be
removed in an upcoming major release. Please refer to
http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false,
_l: undefined, _i: 14.08.2018 00:00, _f: null, _strict: false, _locale: [object Object] Error
at Function.createFromInputFallback (http://localhost:62959/Scripts/moment-with-locales.min.js:1:3368)
at wa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:21353)
at va (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064)
at Sa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146)
at l (http://localhost:62959/Scripts/moment-with-locales.min.js:1:209)
at k.i.getMoment (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14261)
at k.i.defaultDate (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:19874)
at String. (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14947)
at Function.each (http://localhost:62959/Scripts/jquery-3.3.1.js:360:19)
at k.i.options (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14895)
Any clue how to fix this issue?
It seems the probelm was around messing up the input and wraping div ids.
HTML
<div class="form-group row">
#Html.Label("Finish", new { #class = "col-sm-2 col-form-label", #for = "TimeStart2" })
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input id="TimeEnd" name="TimeEnd" value="#Model.TimeEnd" type="text" class="form-control form-control-sm datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
locale: 'es'
});
});
I want my EditorFor fields for DateFrom and DateTo to become a datetime picker (not datepicker). I successfully created it once but I lost my file. I couldn't remember if I used EditorFor or TextBoxFor for that.
Also, how can I make the full name editorfor to be read only? I tried a link from stackoverflow but the field was still editable.
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Approval</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FullName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FullName)
#Html.ValidationMessageFor(model => model.FullName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateFrom)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateFrom, new { #class="date", type = "datetime-local"})
#Html.ValidationMessageFor(model => model.DateFrom)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateTo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateTo, new { #class="datepicker", type = "datetime-local"})
#Html.ValidationMessageFor(model => model.DateTo)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
EditorFor Or TextboxFor any will work you just need to add correct js file and initializer for datetimepicker.
You can use as
#Html.TextBoxFor(m => m.FullName, new { #readonly = "readonly" ,#id="datepicker" })
OR
#Html.EditorFor(m => m.FullName, new { #readonly = "readonly" ,#id="datepicker" })
You Need three js files
jquery
jquery-ui and
Jquery datetimepicker addon
Also You Need 2 css file
jquery ui
Jquery datetimepicker addon
To be clear have a look on following snippet.
$(function() {
$("#datepicker").datetimepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
dateFormat: 'mm/dd/yy',
controlType: 'select',
timeFormat: 'hh:mm TT',
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon#1.6.3/dist/jquery-ui-timepicker-addon.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon#1.6.3/dist/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>
<p>Date and Time:
<input type="text" readonly=true id="datepicker">
</p>
I want to add a project name and task name while clicking on a particular date in fullcalendar but I don't know how to use bootbox.prompt or bootbox.dialog with more than one fields so can you help me out?
select: function (start, end, allDay) {
debugger;
bootbox.prompt("Add New Event", function (title) {
debugger;
if (title !== null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay,
className: 'label-info'
},
true // make the event "stick"
);
}
});
It's quite simple, we can use bootbox dialog for that
bootbox.dialog({
title: 'Add New Event',
message: $('#form'),
show: false,
}).on("shown.bs.modal", function (e) {
$('#form').show()
}).on('hide.bs.modal', function (e) {
/**
* Bootbox will remove the modal (including the body which contains the login form)
* after hiding the modal
* Therefor, we need to backup the form
*/
$('#form').hide().appendTo('body');
})
.modal('show');
calendar.fullCalendar('unselect');
}
In html
<form id="form" method="post" class="form-horizontal" style="display: none;">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary" style="float:right;">Login</button>
</div>
</div>
I just cant fix something that seems so easy.
I want a textbox (editorfor) for a model property and I would like to increase its width but nothing is happening. I'm using the code as listed below. I tried setting the width to 500px but nothing happens. Ideally I would like the textbox to stretch over the full width of the container. Any ideas?
#if (Model.isAnswerVisible)
{
<div class="form-group">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">#Model.AreaNameAnswer</span>
#Html.EditorFor(model => model.Answer, new { htmlAttributes = new { id = "answer", style = "width: 500px", onkeyup = "limitCharacters()", #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Answer, "", new { #class = "text-danger" })
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Leg kort uit wat jouw antwoord is op de vraag"></span>
<label id="lblCountAnswer" style="color: green">#Model.MaxTokensAnswer</label>
</div>
</div>
}
The default MVC5 template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.
Reverse the order of your elements and you get a gap:
Instead of this
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">OK</button>
</span>
</div>
</div>
</div>
In my form I use the DateTimePicker from Kendo UI. When I press the submit button the focus of the DateTimePicker is triggered and not the form submit event.
#using (Html.BeginForm("Edit", "NursingHome", FormMethod.Post, new { #class = "form-horizontal", #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(model => model.ShortTimeCare, new { #class = "col-xs-4 col-sm-3 col-md-2 col-lg-2 control-label" })
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
#(Html.Kendo().NumericTextBoxFor(model => model.ShortTimeCare)
.Format("n0")
.Min(0)
)
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Interval(15)
)
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
}
Have I forgotten something?
In my ViewModel I have a DateTime attribute.
public DateTime ShortTimeCareForDate { get; set; }
When I press the submit button the Curser jumps into the DateTimePicker Field. Nothing else happens.
When I change the code as following the submit event works as desired. (Maybe a Problem with the DateTime Attribute in the Model)
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePicker() // For(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDateXXXXX")
.Value(DateTime.Now)
.Interval(15)
)
</div>
regards,
Marko
When I use the english dateformat then it works. But I need the german format.
English:
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("yyyy-MM-dd hh:mm:ss")
.Interval(15)
)
German
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("dd.MM.yyyy hh:mm:ss")
.Interval(15)
)
Use button type="button" instead of using submit
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="button" class="btn btn-default">Save</button>
</div>
</div>
looks like you are using the wrong culture either on the client or on the server side.
according to http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization you have to set the german culture like follows:
include the culture you want to use right under ~/Scripts/cultures/kendo.culture.de-DE.min.js
in your Layout.cshtml include the culture:
<script src="#Url.Content("~/Scripts/cultures/kendo.culture.de-DE.min.js")"></script>
and set it afterwards:
<script>
kendo.culture("de-DE");
</script>
if you want to set the culture on the server side you need to update your web.config like that:
<system.web>
<globalization uiCulture="de-DE" culture="de-DE"></globalization>
</system.web>
this should fix the occurring issue