I have a partial view page, I want to load JavaScript And CSS files in this partial view.
Please help me how do I do this?
I want to load these three files in Partial View
<link href="~/AdminTheme/BootstrapJalaliDatePicker/css/bootstrap-
datepicker.min.css" rel="stylesheet" />
<script src="~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-
datepicker.min.js"></script>
<script src="~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-
datepicker.fa.min.js"></script>
Partial View:
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label asp-for="StartDate" class="control-label">
StartDate
</label>
<input id="sdDate" class="Date form-control" name="stDate"/>
<span asp-validation-for="StartDate" class="error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="EndDate" class="control-label">
EndDate
</label>
<input id="edDate" class="Date form-control" name="edDate"/>
<span asp-validation-for="EndDate" class="error"></span>
</div>
</div>
</div>
<script type="text/javascript" language=javascript>
$(document).ready(function() {
$('.Date').datepicker({ dateFormat: "yy/mm/dd", isRTL: true,
showButtonPanel: true });
});
</script>
The solution obtained:
$(document).on("focusin",".Date", function () {
$(this).datepicker({
dateFormat: "yy/mm/dd",
isRTL: true,
showButtonPanel: true
});
});
add css:
.datepicker{z-index:1151 !important;}
Related
I'm using bootstrap datepicker with bootstrap-rtl
the issue I had 2 fields, one for date and one for name, the datepicker not shown until I click first in date input then in name input then when I click back in date input the datapicker shown, and this happened only in first load of page then its work fine until you reload the page again.
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">name</label>
<input type="text" maxlength="40" name="name" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<span class="text-danger Bold">*</span>
<label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="ExpiredDate" class="form-control datepicker">
</div>
</div>
</div>
<script type="text/javascript">
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
</script>
this will work for you
<script type="text/javascript">
$(document).ready({
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
});
</script>
you need to initialize your datetimepicker after dom is ready not before that.
I tried to use Bootstrap date-picker (https://github.com/eternicode/bootstrap-datepicker), but i can't get it to work.
On jsfiddle everything works like a charm: http://jsfiddle.net/hwuktpt2/
After some failed tests on the actual page, I even tried a blank new page and integrated everything from scratch again. jQuery works, Bootstrap styling works, Datatables works, but I just can't get date-picker to work.
Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript">
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
</script>
<style type="text/css">
.control-label {
padding-top:7px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
Neues Mobile Device anlegen
</div>
</div>
<div class="container">
<form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post">
<div class="form-group">
<label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label>
<div class="col-xs-10">
<select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED>
<option value="">-- Bitte auswählen --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label>
<div class="col-xs-10">
<input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label>
<div class="col-xs-10 date_picker">
<input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld">
</div>
</div>
</form>
</div>
</body>
Wrap the date picker initialize call in a document.ready. This code is running before the dom is finished loading from the look of it. Since JavaScript is interpreted it is run at the time it is read by the browser. Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document.ready functionality you could also move the script to the end of the body tag.
$(function(){
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
Use these Libraries after using this use below code in you body where you want to make Date field.
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
var j = jQuery.noConflict();
j(function () {
j('#datetimepicker1').datetimepicker({
format: 'L',
disabledHours: true,
});
});
</script>
If I removed the autoclose it works fine. How to autoclose datetimepicker. I've been searching on this but couldn't find useful information.
$('#start_schedule').datetimepicker({
format: 'HH:mm',
autoclose: true
});
It doesn't work actually according to documentation. If you will use showClose: true, it won't recognize, you will get an error. There is no other way rather than using this code in the docs. Hope this help.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
I added datetime picker plugin in my code. It works but not positioning rightly. When I focused on the input it's showed in footer of page not near the input. What should I check for?
$(".form-date").datetimepicker({
format: "dd.mm.yyyy",
minView: 2,
maxView: 4,
autoclose: true,
language: 'tr',
pickerPosition: "bottom-left"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class="col-md-9 input-append date form-date">
<input type="text" class="form-control" name="Tarih" id="Tarih" value="" placeholder="Tarih">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
Aside from missing some of the required assets (datetimepicker, moment, etc) in your shared snippet, you are using deprecated options which prevent datepicker from displaying.
You can find current options here.
List of required assets here.
Update to the following:
format: 'dd.MM.YYYY'
min & maxView are gone but you can check viewMode on the options link (no min-max option though).
autoclose to keepOpen (although it's set to false by default, so no
need)
language to locale: 'tr'
pickerPosition to widgetPositioning {horizontal: 'left', vertical: 'bottom'} object.
Working Snippet:
$('.form-date').datetimepicker({
format: 'dd.MM.YYYY',
locale: 'tr',
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
}
});
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class='input-group date form-date col-md-9 input-append'>
<input type='text' class="form-control" placeholder="Tarih" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
I think there is no 'pickerPosition: "bottom-left"' option for Bootstrap Datetime Picker.
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
May be it is causing the problems.
There is no datetimepicker component files in your html reference codes. You should have added js and css files.
First download the scripts from the component website here or clone from git:
$ git clone git://github.com/smalot/bootstrap-datetimepicker.git
And add references in the head section:
Sources:
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
HTML:
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<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-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
There is no option for older version of Bootstrap Datetime Picker. But you can change the positioning by applying CSS to the dropdown picker.
.bootstrap-datetimepicker-widget.dropdown-menu {
inset: auto!important;
}
Here is the docs for more details :
https://bootstrap-datepicker.readthedocs.io/
I have a problem in Jquery Datepicker can not change month & year in popup :(
please help me
Screenshot
http://prntscr.com/3vauj2
This CSS & JS Date Picker
<link rel="stylesheet" href="../stylesheets/ui-lightness/jquery.ui.all.css">
<script src="../javascripts/jquery-1.10.2.js"></script>
<script src="../javascripts/jquery.ui.core.js"></script>
<script src="../javascripts/jquery.ui.widget.js"></script>
<script src="../javascripts/jquery.ui.datepicker.js"></script>
<script>var date = jQuery.noConflict();
date(function() {
date("#asd").datepicker({
changeMonth: true,
changeYear: true,
dateFormat : "yy-mm-dd",
yearRange: "-0:+1",
});
});
</script>
HTML
<ul class="inline-popups">
<h3><i class="fa fa-plus">Add Gallery</i></h3>
</ul>
<!-- Form popup -->
<div id="text-popup-html" class="white-popup mfp-with-anim mfp-hide">
<CENTER>ADD GALLERY</CENTER><br/>
<form id="ff" action="ad_gallery.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1">Title Gallery</label>
<input type="text" maxlength="50" class="form-control" id="addgallery" name="ti" placeholder="Title Gallery">
</div>
<div class="form-group">
<label>Date</label>
<input type="text" class="form-control" id="asd" name="dt" >
</div>
<center>
<button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-danger">Reset</button>
</center>
</form>
</div><br/>
I Confused :(