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.
Related
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;}
I have two datepickers. one for 'fromDate' and another for 'ToDate'. Here i want to save candidates work Experiences.So i have to fields to add fromdate and todate.That i get more experience history of one candidate.If i choose a date from fromDate picker and ToDate picker it should restrict the selection of dates between the records of db date given in fromdate and todate.In my form i have a check box to check the present work.so i get fromdate of work and todate is set it as 0000-00-00 to know it is on going.
table structure:userid,title,fromdate,todate,company,description.
my code:
<form id="candiwork" action="{{url('Candidate/experience/details')}}" method="post">
{{ csrf_field() }}
<div class="row">
<div class="col-lg-12">
<span class="pf-title">Job Title</span>
<div class="pf-field">
<input placeholder="Job Title.." type="text" name="job" id="job">
</div>
</div>
<div class="col-lg-5">
<span class="pf-title">From Date</span>
<div class="pf-field">
<input placeholder="06.11.2007" type="text" class="form-control datepicker" name="fromDate" id="fromDate">
</div>
</div>
<div class="col-lg-5">
<span class="pf-title">To Date</span>
<div class="pf-field">
<input placeholder="06.11.2012" type="text" class="form-control datepicker" name="toDate" id="toDate">
</div>
</div>
<div class="col-lg-2">
<p class="remember-label">
<input type="checkbox" name="cb" id="fgfg"><label for="fgfg">Present</label>
</p>
</div>
<div class="col-lg-12">
<span class="pf-title">Company</span>
<div class="pf-field">
<input placeholder="Company" type="text" name="company" id="company">
</div>
</div>
<div class="col-lg-12">
<span class="pf-title">Description</span>
<div class="pf-field">
<textarea name="description" id="description"></textarea>
</div>
</div>
<div class="col-lg-12">
<button type="submit" id="btn">Save</button> <br><br><br><br><br><br>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$("#fromDate").datepicker({
maxDate: '0',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#toDate').datepicker('setStartDate', minDate);
$('#toDate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});
$("#toDate").datepicker({
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#fromDate').datepicker('setEndDate', maxDate);
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
});
$("#fgfg").change(function() {
if(this.checked) {
$("#toDate").prop("disabled",true);
}else{
$("#toDate").prop("disabled",false);
}
});
$("#candiwork").validate({
rules: {
job: {
required: true,
},
fromDate: {
required: true,
},
toDate:{
required:true,
},
company:{
required:true,
},
description:{
required:true,
}
},
messages: {
job :"Please enter job title",
fromDate:"Please enter from date",
toDate:"Please enter to date",
company:"Please enter company name",
description:"Please enter description"
},
});
</script>
I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});
$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});
The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.
How can I persuade the datetimepicker to display its value in the input text field at initial pageload?
In this case the value attribute of the datepicker text-input is already set, but the field is displayed blank. Therefore I've tried to set the 'data-date-defaultdate' attribute but at the initial pageload the text field´s still blank. After a reload the value is displayed as expected.
The Form (excerpt):
<form name="news" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validFrom">Start time</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date datetime-picker" id="datetime1">
<input type="text" id="news_validFrom" name="news[validFrom]" required="required" class="form-control" value="2016-07-08T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validTo">End date</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date date-picker" id="datetime2">
<input type="text" id="news_validTo" name="news[validTo]" required="required" class="form-control" value="2016-06-22T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
// [...]
</form>
The Script:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').attr('value'),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').attr('value')
});
});
Any ideas how to make this work?
Chnage to:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').val(s),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').val()
});
});
Since I didn´t come to a solution for this problem I gave another fork of the bootstrap-datetimepicker a try: smalot/bootstrap-datetimepicker
This one works as expected and I don´t have the problem with the input value (the value is always displayed in the text field).
I suppose, the problem could issue from the given date format (value="2016-07-0 8T 00:00:00 +02:00"), but I haven´t figure it out exactly.
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>