I have a page to show datepicker but instead of month name and date, it shows undefined.
CSHTML
<div class="row my-row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-5">Select incident date range From</label>
<div class="col-xs-12 col-sm-7">
<input id="fromDate" class="datepicker" />
<input name="button" type="image" src="~/Content/Images/icon_calendar.png" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-5">To</label>
<div class="col-xs-12 col-sm-7">
<input id="toDate" class="datepicker" />
<input name="button" type="image" src="~/Content/Images/icon_calendar.png" />
</div>
</div>
</div>
</div>
javascript
$('#datepicker')
.datepicker({
format: 'mm/dd/yyyy',
autoclose: true,
endDate: '+0d',
todayHighlight: true,
weekStart: 1
})
can any one please help on this..
I suppose you meant $('.datepicker') instead of $('#datepicker') ?
If you have correctly import the boostrap and jqueryui files, you shouln't have any error. Maybe you have conflicts with something else
Related
I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach that I am following is not working.
Here is my code -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
I want submit button to remain disabled until I don't select values for all the required fields.
I need a functionality which we should not be able to select (disable) the end date before the start date using javascript or jquery but without depending on any jquery-ui or datepicker plugins. Please help me in getting this, thanks in advance.
I have done online search but everything is dependent on other plugins, is there any chance to get it done without plugins.
<div class="row">
<div class="col-md-6">
<label for="startDate">Start date</label>
<input type="date" class="inputdata" id="startDate">
</div>
<div class="col-md-6">
<label for="endDate">End date</label>
<input type="date" class="inputdata" id="endDate">
</div>
</div>
Date inputs have a min attribute which specifies the minimum date you can select. Mozilla docs
$("#startDate").on("change", function(){
$("#endDate").attr("min", $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label for="startDate">Start date</label>
<input type="date" class="inputdata" id="startDate">
</div>
<div class="col-md-6">
<label for="endDate">End date</label>
<input type="date" class="inputdata" id="endDate">
</div>
</div>
I use a simple Bootstrap pophover, But i face problem when i insert Datepicker under this pophover, then Datepicker it's not show. but, normal Datepicker is work if i don't insert it under pophover.
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="clearfix ">
<div class="checkbox">
<label>
<input id="asap" type="checkbox"> ASAP
</label>
</div>
</div>
<div class="clearfix hideevent">
<div class="form-group">
<div class="checkbox">
<label>
<input name="morning" type="radio"> Morning
</label>
</div>
<div class="checkbox">
<label>
<input name="morning" type="radio"> Evening
</label>
</div>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</form>
</div>
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$('#date').each(function() {
$(this).datepicker('clearDates');
});
You can used your popover html content in data-content='' attribute
<input type="text" data-content=' popover html paste here ' readonly id="PopS" data-placement="bottom" data-toggle="popover" data-html="true" placeholder="Quando" class="form-control" data-container="body"/>
Then write bellow script:
<script>
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#date').datepicker({
format: 'dd/mm/yyyy',
});
});
</script>
Note: in this <div id="popover-content" class="hide"> remove
class="hide"
$('[data-toggle=popover]').on('show.bs.popover', function () {
$('#date').datepicker();
})
try this one.
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 am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual