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 :(
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 the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:
Working variable:
Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>
Not working variable inside div:
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" id='sdatefield'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
</script>
</div>
</div>
observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.
Try like the below
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"> </script>
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" >
<input type='text' class="form-control" id="sdatefield"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
Thanks
I just applied emojionearea.js to my textarea but emoji are been displayed at the top of my textarea, hiding its view from users.
I will like to know how to position its container to the bottom of my textarea.
my code :
$(document).ready(function() {
$(".emoji_act").emojioneArea({
emojiPlaceholder: ":smile_cat:",
searchPlaceholder: "Search",
buttonTitle: "Use your TAB key to insert emoji faster",
searchPosition: "bottom",
});
});
<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
<form method="POST" action="" enctype="multipart/form-data">
<div class="form-group">
<font color="#a1a1a1"><span id="count"></span> characters remaining</font>
<textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
<span id="bio_val"></span>
</div>
<div class="form-group">
<button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
Done
</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
In order to learn how to use this js lib, please follow this document.
now lets solve your current problem:
you can set the property pickerPosition to bottom in your initial config which is passed to emojioneArea jquery function.
$(document).ready(function() {
$(".emoji_act").emojioneArea({
emojiPlaceholder: ":smile_cat:",
searchPlaceholder: "Search",
buttonTitle: "Use your TAB key to insert emoji faster",
searchPosition: "bottom",
pickerPosition: "bottom"
});
});
<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
<form method="POST" action="" enctype="multipart/form-data">
<div class="form-group">
<font color="#a1a1a1"><span id="count"></span> characters remaining</font>
<textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
<span id="bio_val"></span>
</div>
<div class="form-group">
<button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
Done
</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
I am working on the website in which I want to popup the calendar on hitting calendar icon.
The HTML code which I have used in order to place Start Date and End Date are:
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Problem Statement:
I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).
I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
As you are using Bootstrap, I recommend using Bootstrap Datepicker.
In your site, give an id to the date input fields and initialize as below.
$(document).ready(function(){
$("#startdate").datepicker();
$("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
<input id="startdate">
<input id="enddate">
You can try Bootstrap Datepicker
https://jsfiddle.net/codeandcloud/acq7t97c/
or JQuery Datepicker
http://jsfiddle.net/klenwell/LcqM7/
It looks like you are using jQuery's datepicker?
You are trying to execute this line
$( "#datepicker" ).datepicker();
but you don't have any element with an id datepicker.
Try adding the id datepicker to your input if you want the entire input to change into datepicker on click. Added id datepicker to your input with the class start_date.
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true ">
</span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Just an Id to the Calendar icon and click action to the corresponding icon using javascript
$(document).ready(function() {
$('#calendar1').click(function(event) {
$('.start_date').datepicker('show');
});
$('#calendar2').click(function(event) {
$('.end_date').datepicker('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar1">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar2">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
</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.