Bootstrap datetime picker doesn't collapse - asp.net-mvc

I'm trying to add date time picker for my mvc 5 application. tried several ways to do it.But it doesn't work.Text box and calender icon is appeared on the view but when i click on the calender it doesn't collapse and show the calender.. why is that?
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br />
</div>
</fieldset>
</form>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>

According to https://eonasdan.github.io/bootstrap-datetimepicker/Installing/
Minimal Requirements
jQuery
Moment.js
Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS
Locales:Moment's locale files
I create simple demo with your code and get error in console :
Uncaught bootstrap-datetimepicker requires Moment.js to be loaded
first
So just add Moment.js to your app

Related

stop bootstrap date-picker selecting today date

I've got a bootstrap date picker on my ruby on rails application but it keeps selecting today date as default how do I stop this?
Javascript
<script type="text/javascript">
$(".datepicker").attr('readOnly', 'true').css("background-color","white");
$(document).ready(function(){
$('.datepicker').datepicker({
"setDate": new Date(-70),
yearRange : '-70:-19',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
As shown below today's date 30th march is selected. If the user doesn't change the year or month all dates for march in initial view will select for
"day March 2018"
Any help is much appreciated!
First of all, this is not a bootstrap datePicker this is jquery datePicker, see the below for bootstrap datePicker, for bootstrap datePicker you can use bootstrap datePicker gem, try to the following added to todayHighlight: false
$(document).ready(function() {
var dateInput = $('input[name="date"]'); // Our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';
dateInput.datepicker({
"setDate": new Date(-70),
yearRange : '-70:-19',
dateFormat: 'dd/mm/yy',
todayHighlight: false,
changeMonth: true,
changeYear: true,
autoclose: true
});
$('#date').datepicker('setStartDate'); // <-- SO DOES THIS
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal" method="post">
<div class="form-group ">
<div class="col-sm-10">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>

How to call a css style in content page using ASP.NET MVC?

I have created a master page for my application and then the master application has been displayed in every page, but I have created a content page and I have created a separate CSS style design for this page and I have called to that particular page but the style for this page is not displayed.
#model MedeilMVC_CLOUD.Models.Company
#{
ViewBag.Title = "Add Company";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
<div class="page-content">
<div class="container-fluid">
<section class="box-typical box-panel mb-4">
<header class="box-typical-header">
<div class="tbl-row">
<div class="tbl-cell tbl-cell-title">
<h3>Form steps example</h3>
</div>
</div>
</header>
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
<div>
<h3>Account</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</section>
<h3>Profile</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</section>
<h3>Hints</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<h3>Finish</h3>
<section>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="agree" class="required" required>
<label for="agree">Terms and Conditions</label>
</div>
</div>
</section>
</div>
</form>
</div><!--.box-typical-body-->
</section>
</div>
</div>
<script src="~/js/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/js/lib/jquery-steps/jquery.steps.min.js"></script>
<script>
$(function () {
$("#example-basic ").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
var form = $("#example-form");
form.validate({
rules: {
agree: {
required: true
}
},
errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); },
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
$("#example-tabs").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
enableFinishButton: false,
enablePagination: false,
enableAllSteps: true,
titleTemplate: "#title#",
cssClass: "tabcontrol"
});
$("#example-vertical").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
});
</script>
Style Sheet Link
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
And also javascript file also not working
you can use section directive in layout.
In layout write in that place where you want insert section (head/fooret etc...)
#RenderSection("styles", false)
Then in view set the content to this section:
#section styles{
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}
Name of this section may be any. But in view you can use each section only one time in any place.

Restricting uib-datepicker to just one year

How do I fix the uib-datepicker to just one year. (say current year only).
I tried searching but all that I could find was to restrict calendar to year mode only. I tried setting year:2016 in datepicker-options but it didn't work.
Any suggestions ???
You can to use minDate and maxDate properties in the datepicker-options object as described in the docs.
The following code shows a datepicker limited to the current year:
angular.module('MyApp',['ui.bootstrap']).controller('AppCtrl', function($scope) {
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.dateOptions = {
minDate: moment().startOf('year').toDate(),
maxDate: moment().endOf('year').toDate()
};
$scope.format = 'dd-MMMM-yyyy';
$scope.popup1 = {
opened: false
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-touch.min.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<div ng-app="MyApp" ng-controller="AppCtrl">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
Note that I used moment startOf, endOf and toDate to get the first and the last days of the current year as Date objects.

Use jQuery DatePicker in Bootstrap 3 modal

I would like to use jQuery UI datepicker in a modal. The real problem is that if I want to also show years and months, it shows me empty selects:
Using firebug, it seems that the option tags are under the modal.
This is my HTML:
<div class="modal-dialog">
<div class="modal-content">
<form id="add-form" action="#" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="input-group">
<label for="date">Date</label>
<input type="text" id="date" name="date" class="form-control datepicker"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary">Salva</button>
</div>
</form>
</div>
</div>
Javascript:
$( ".datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
changeMonth: true,
changeYear: true
});
$('.datepicker').css("z-index","0");
I already tried this but it doesn't work (I have the same problem of giuseppe).
I found the solution with this answer. The only option you needed is enforceFocus.
Working Demo
jQuery
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Only had to add this style:
<style>
.ui-datepicker{
z-index: 9999999 !important;
}
</style>
i could not get $.fn.modal.Constructor.prototype.enforceFocus = function() {}; to work becuase the 'focusin.bs.modal' event was already attached to the modal.
this is the code i got to work; because the date picker is called after the modal opens. using the beforeShow() and onClose function i was able to turn the focus event off and on
var datepicker_opts = {
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
altFormat: "yymmdd",
setDate: new Date(),
maxDate: new Date()
};
BootboxContent = function(){
var frm_str = '<form id="some-form">'
+'<div class="form-group">'
+ '<label for="date">Date</label>'
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';
var object = $('<div/>').html(frm_str).contents();
object.find('.date').datepicker(
$.extend({
beforeShow: function(elem, inst) {
$(document).off('focusin.bs.modal');
},
onClose: function(selectedDate, inst) {
$modal = $(inst.input[0]).closest(".modal").data('bs.modal');
$modal.enforceFocus();
}
}, datepicker_opts)
);
return object
}
$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: BootboxContent,
title: "View modal with date",
buttons: {
cancelar: {
label: "Cancel",
className: "btn-default"
}
}
});
}); //End click
.hidden-form #add_class_form {
display:none;
}
.ui-datepicker{
z-index: 9999999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>

jquery use of :last and val()

I'm trying to run the code from http://jsfiddle.net/ddole/AC5mP/13/ on my machine and the approach I've use is below or here.
Do you know why that code doesn't work on my machine. Firebug doesn't help me and I can't solve the problem. I think that I need another pair of eyes :(((
In firebug,console tab i don't get any error message. The problem is that I can't get the value of that input from the dialog box, after I press save button. The $('input:last').val() seems to be empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" >
jQuery(function($) {
$('.helpDialog').hide();
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
width: 300,
height: 250,
buttons: {
"Save": function() {
alert($('.helpText:last').val());
$(this).dialog( "close" );
},
Cancel: function() {
$(this).dialog( "close" );
}
}
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
</script>
</head>
<body>
<span class="helpButton">Button</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 4</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 5</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div> </body>
Refer LIVE DEMO
To display the text on save, I have modified your line alert($('.helpText:last').val()); to this alert($('.helpText', this).val());
I have added one more dependencies on fiddler,
http://code.jquery.com/ui/1.8.21/jquery-ui.min.js
Now its working as expected.
HTML:
<span class="helpButton">Button</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 4</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 5</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
JS:
jQuery(function($) {
$('.helpDialog').hide();
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
width: 300,
height: 250,
buttons: {
Save: function() {
alert($('.helpText', this).val());
$(this).dialog( "close" );
},
Cancel: function() {
$(this).dialog( "close" );
}
}
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});

Resources