i'm having some small issues with my JavaScript in my razor view.
I want a user to report absent, but when he picks the time I want a date-time picket to show up so the user doesn't have to manually enter the date.
I also want it to be two different tabs, first tab is where the user will report his vacation and the other tab he will see the reports of older vacations. But now it all appear at ones. I would like to have it similar to this:
But now "Begärd semstrar" is just sitting under "Begär semester"
This is my view a long with my javascript
#using Salesweb.Common.Utilities
#model List<Salesweb.Common.Vacation>
#{
ViewBag.Title = "Semester";
}
<script type="text/javascript" language="javascript">
$(function () {
$(function () {
$('#fromDate').datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
firstDay: 1,
onSelect: function (dateText) {
$('#EndDate').datepicker('option', 'minDate', new Date(dateText));
}
});
$('#toDate').datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
firstDay: 1,
onSelect: function (dateText) {
$('#EndDate').datepicker('option', 'minDate', new Date(dateText));
}
});
});
});
$(function () {
$("#tabs").tabs();
});
</script>
<div class="page-container">
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="tabs">
<div class="portlet light">
<ul>
<li>Begär semester</li>
<li>Begärda semestrar</li>
</ul>
<div id="tabs-new">
#if (ViewData["posted"] == null)
{
using (Html.BeginForm("Index", "Vacation", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject font-green-sharp bold uppercase">Semester</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover">
<tr>
<td>Från:</td>
<td><input type="text" id="fromDate" name="fromDate" style="width: 70px" /></td>
</tr>
<tr>
<td>Till:</td>
<td><input type="text" id="toDate" name="toDate" style="width: 70px" /></td>
</tr>
<tr>
<td>Kommentar:</td>
<td><textarea id="comment" name="comment" style="width: 300px; height: 70px;" rows="5" cols="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Begär semester" id="submit" name="submit" /></td>
</tr>
</table>
</div>
</div>
}
}
else
{
<h2 style="color: Green"> Semestern begärd.</h2>
#Html.ActionLink("Begär ny semester", "Index")
}
</div>
<div id="tabs-list">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject font-green-sharp bold uppercase">Semester</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Från</th>
<th>Till</th>
<th>Rapportera tid</th>
<th>Status</th>
<th>Kommentar</th>
</tr>
</thead>
#foreach (var vacation in Model)
{
<tr>
<td>#(vacation.StartDate.ToShortDateString())</td>
<td>#(vacation.EndDate.ToShortDateString())</td>
<td>
#if (vacation.TimeReported)
{
<a>Tid har rapporterats</a>
}
else if (vacation.Status == (int)VacationStatus.Godkänd && !vacation.TimeReported)
{
Rapportera tid
}
else
{
<a>-</a>
}
</td>
<td>#(((VacationStatus)vacation.Status).ToString()) </td>
<td>#vacation.Comment</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I load in my scripts in a bundle
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-2.8.3",
"~/content/global/plugins/jquery.min.js",
"~/content/global/plugins/jquery-ui/jquery-ui.min.js",
"~/content/global/plugins/bootstrap/js/bootstrap.min.js",
"~/content/global/plugins/datatables/media/js/jquery.dataTables.min.js",
"~/content/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.js",
"~/content/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js",
"~/content/global/scripts/metronic.js",
"~/content/admin/layout3/scripts/layout.js",
"~/content/admin/layout3/scripts/demo.js",
"~/content/admin/pages/scripts/table-advanced.js"
));
And than from my _Layout.cshtml I load in the scripts like this.
#Scripts.Render("~/bundles/modernizr")
Your jQuery document ready functions are a little messy / nested
$(function () {
$('#fromDate').datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
firstDay: 1,
onSelect: function (dateText) {
$('#EndDate').datepicker('option', 'minDate', new Date(dateText));
}
});
$('#toDate').datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
firstDay: 1,
onSelect: function (dateText) {
$('#EndDate').datepicker('option', 'minDate', new Date(dateText));
}
});
$("#tabs").tabs();
});
I have removed the duplicated document ready checks. Try the code I have provided above.
Related
I want to use external elements option (wrap). I imagine that if I use this option I'll be able
to open a datepicker by simply pressing on calendar icon but that is not a case. How to make so, that this datepicker would open upon clicking on datepicker icon and on input field?
Update no.1
after trial and error session I realized that I was missing wrapping div with a class flatpickr. The case can be closed. (see update for a solution [second datepicker])
Update no.3
it is still not fixed. Now it opens a drop menu, however on select field is empty
Update no.4
on the third update now it seems to be working. Finally. Needed to add data
attributes (data-toggle and div class flatpickr)
flatpickr($(".input-group.date"), {
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
//working after adding div with flatpickr class
//opens mnu on pressing icon
$(".flatpickr").flatpickr($(".input-group.date"), {
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
//working after adding div with flatpickr class
//opens mnu on pressing icon
$(".input-group.date3").flatpickr({
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css" rel="stylesheet" />
</head>
<body>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">
from
</label>
<div class="input-group date">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="
">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
<!--second atempt-->
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">
from (working correctly)
</label>
<div class="flatpickr">
<div class="input-group date">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="
">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<!--third attempt-->
<div class="col-sm-12">
<div class="form-group">
<label class="control-label">
from (third time is a charm)
</label>
<div class="flatpickr">
<div class="input-group date3">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="random-class" data-toggle>
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
</body>
</html>
I don't know how to call my jQuery function from my HTML file.
This function was in the HTML file at the beginning. I moved it in to a JS file and would like to call it from this as the code looks cleaner when I have different files for the different languages.
$(function() {
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
$(function() {
$('#datepicker2').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<div onclick="datumEins()" class="container">
<div class="row">
<h2>Startdatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker'>
> i think the calling must be putted in the input tag
<input type='text' id="datum1" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<!--ENDDATUM-->
<div onclick="datumZwei" class="container">
<div class="row">
<h2>Enddatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker2'>
> i think the calling must be putted in the input tag
<input type='text' id="datum2" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
I have two textbox with datepicker, currently I am using a button icon for selecting the date. My problem is the button is appearing directly below the textbox whereas I would like it to align directly to the right side of the textbox. I believe I would need to work on CSS to achieve the results.
$('#datepicker1').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
$('#datepicker2').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div class="form-group row">
<div style="float:left;" class="form-group col-xs-6">
<label>Date 1</label>
<input type="text" class="form-control" id="datepicker1"/>
</div>
<div style="float:left" class="form-group col-xs-6">
<label>Date 2</label>
<input type="text" class="form-control" id="datepicker2"/>
</div>
</div>
apply this css using position:absolute;
$('#datepicker1').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
$('#datepicker2').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
.form-group{
position:relative;}
.ui-datepicker-trigger{
right: 16px;
top: 26px;
position: absolute;}
.ui-datepicker-trigger span{
line-height:26px;}
.form-control{
padding-right:30px!important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div class="form-group row">
<div style="float:left;" class="form-group col-xs-6">
<label>Date 1</label>
<input type="text" class="form-control" id="datepicker1"/>
</div>
<div style="float:left" class="form-group col-xs-6">
<label>Date 2</label>
<input type="text" class="form-control" id="datepicker2"/>
</div>
</div>
I have used add new button with my code which is used to add blank elements to table.Now in first select drop down while selecting any element from drop down i want to populate relevant data to table but currently while selecting any element from select drop down it populate relevant data to all added element with in table.
view code:
<!DOCTYPE html>
<html lang="en">
<body>
<!-- start: Content -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="wizard2" class="wizard-type2">
<ul class="steps">
<li class=""><a class="c-detail" href="form-wizard.html#tab21" data-toggle="tab">Articles</a></li>
</ul>
<div class="text-center">
<h4 class="c-detail">Articles</h4>
</div>
<!-- <div class="progress thin">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div> -->
<div class="tab-content">
<div class="tab-pane" id="tab21">
<form class="form-horizontal" role="form">
<table class="table table-striped table-bordered datatable" id="records_table">
<thead>
<tr>
<th>Article Name</th>
<th>Article Number</th>
<th>Article Price</th>
<th>ArticleLedger</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<button class="btn-info btn-sm add_new" type="button"><i class="fa fa-plus"></i> Add New</button>
<tr id="trId1">
<td class="clone">
<select class="form-control InvoiceTypeClass" name="InvoiceTypeId" Id="InvoiceTypeId">
<option >Please select</option>
<% article.forEach(function(articletype) { %>
<option value= "<%=articletype.ArticleName%>"><%=articletype.ArticleName%></option>
<% }); %>
</select>
</td>
<td><span class="addvalue"></span></td>
<td><span class="addvalue3"></span></td>
<td><span class="addvalue4"></span></td>
<td>
<input type="button" value="Delete" class="del" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
ajax and jquery code:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#dateof").datepicker({
changeMonth: true,
changeYear: true,
format: "DD-MM-YYYY"
});
$("#dateto").datepicker({
changeMonth: true,
changeYear: true
});
$("#endDate").datepicker({
changeMonth: true,
changeYear: true
});
$("#created").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script>
$(document).ready(function() {
$('data').on('change', function() {;
var invoice_id = $(this).attr('attr_id');
alert(invoice_id)
$.ajax({
url: '/admin/invoice/delete/' + invoice_id,
type: 'post',
data: {
invoice_id: invoice_id
},
success: function(response) {
window.location.href = '/admin/invoice/'
},
error: function(err) {
console.log(err);
}
})
});
});
</script>
<script>
$(document).ready(function() {
$(document).on("change", ".InvoiceTypeClass", function() {
var companyname = $(this).val();
alert(companyname);
$.ajax({
url: '/admin/invoice/getarticle/' + companyname,
type: 'post',
data: {
companyname: companyname
},
success: function(data) {
data.forEach(function(item) {
$('.addvalue').text(item.ArticleNumber);
$('.addvalue3').text(item.ArticlePrice);
$('.addvalue4').text(item.ArticleLedger);
});
},
error: function(error) {
console.log(error);
}
});
});
/********clone table row start*******/
$(".add_new").click(function() {
var clone = $(".odd:eq(0)").clone();
$(".odd:last").after(clone).add;
});
$(document).on('click', '.del', function() {
if ($('.rows').length > 1) $(this).closest('.rows').remove();
})
/********clone table row End*******/
});
</script>
I have a form with 2 datetimepciker: one is for start date, the other is for end date.
The validation is that when the start date is selected, the end date must greater or equal the start date.
I search on the Internet but my code doesn't work.
Here is my js function:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$("#report_endDate").datepicker().on("dp.change", function (e) {
$('#report_startDate').data("DateTimePicker").minDate(e.date);
});
}
Here is my html of 2 date time picker:
<table style="width: 100%">
<tr>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_startDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_startDate">
<input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_endDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_endDate">
<input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
</tr>
</table>
Anyone here can explain what's wrong with my code and how to solve the problem? Many thanks.
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$("#report_endDate").datepicker().on("dp.change", function (e) {
$('#report_startDate').data("DateTimePicker").minDate(e.date);
});
}
<table style="width: 100%">
<tr>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_startDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_startDate">
<input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_endDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_endDate">
<input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
</tr>
</table>
Try changing the below code in your js
$('#report_startDate').data("DateTimePicker").minDate(e.date);
to
$('#report_startDate').datepicker("option", "minDate", e.date);
I finally found the answer.
My function called wrong event of datetimepicker when it changed.
My function changed to:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
}).on("changeDate", function (e) {
$('#report_endDate').datepicker('setStartDate', e.date);
});
;
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
}
And it works.
Reference: Bootstrap datepicker change minDate/startDate from another datepicker