HTML:
<input type="text" name="form" placeholder="Check In">
JS:
$('input[name="form"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
});
I want to look like this.
example
bootstrap-daterangepicker official website：http://www.daterangepicker.com/
UPDATE: You can do a work-around using this:
$('input[name="from"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
});
$('input[name="from"]').val('');
$('input[name="from"]').attr("placeholder","Check In");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<input type="text" name="from" placeholder="Check In" class="form-control">
For anyone reading this I believe that this is the correct answer:
$('input[name="from"]').val('');
$('input[name="from"]').attr("placeholder","Check In");
Source: https://stackoverflow.com/a/15252825
Just add autoUpdateInput: false .
$('input[name="form"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
});
Related
I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.
You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>
This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>
whenever i tried to select a date the on function is fired 3 times i tried removing this script
and it does work, but the ui is ruined and also i noticed that onselect is not working.
<!Doctype html>
<html>
<head>
<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function(){
var newdate = new Date();
$("#inputMultiDate").datepicker({
autoclose: true,
todayHighlight: true,
multidate: true,
format: 'dd-mm-yyyy',
onSelect: function(date){
console.log(date);
}
}).on("change", function() {
var dates = $('#inputMultiDate').val().split(',');
alert(dates[0]);
});;
});</script>
</head>
<body>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
</body>
</html>
onSelect is not working because onSelect is an option of jQuery UI datepicker, however you're using Bootstrap datepicker, which is a very different plugin.
Instead, boostrap datepicker uses events chained to the datepicker itself, like you have done with your change. However, given how the datepicker actually works behind the scenes, I'd imagine it changes the input multiple times, hence firing multiple alerts.
Instead of change, try changeDate:
var newdate = new Date();
$("#inputMultiDate").datepicker({
autoclose: true,
todayHighlight: true,
multidate: true,
format: 'dd-mm-yyyy'
}).on("changeDate", function() {
var dates = $(this).val().split(',');
console.log(dates[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
I am using this datetimepicker. I would like to display the close button, but I cannot the see it on the inline mode. Can anyone please help? Here is my code.
$(function () {
$('#datetimepicker1').datetimepicker({
sideBySide: true,
showClose: true
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<form name="form1" id="form1" style="width :200px;">
<div class='input-group date' id='datetimepicker1' style ="margin :10px;">
<input name="TextBox1" type="text" id="TextBox1" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</form>
</body>
</html>
You can force the toolbar with the close button to display when usingsideBySide by setting toolbarPlacement to "top" or "bottom".
$(function () {
$( "#datetimepicker1" ).datetimepicker({
sideBySide: true,
toolbarPlacement: "bottom",
showClose: true
});
});
Try this :
$(function () {
$('#datetimepicker1').datetimepicker({
showButtonPanel: true,
closeText: "Ok",
onSelect:function(event){
event.preventDefault();
// blah blah blah
}
});
});
i am using the following code for datetimepicker but i am unable to understand why it is not working. I mean in the input box nothing is shown. Please help me ?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/i18n/jquery-ui-timepicker-addon-i18n.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
You must add the following too:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
^ Here is the plugin js & css.
And here you will find all the scripts/css files that you need: http://cdnjs.com/libraries/jquery-ui-timepicker-addon
i need guide on how to apply this restriction for back dates for the date picker as i am new to this javascript.
<script type="text/javascript" src="javascript/datepickr.min.js"></script>
<input class="" type="Text" size="30" name="Date" id="Date" placeholder="yyyy-mm-dd"/>
<script type="text/javascript">
new datepickr('Date',
{
'dateFormat': 'Y-m-d'
}
);
</script>
i do saw some people post about solution like this code, but i don't know how to apply in my code
$(function() {
$( "#datepicker" ).datepicker({ minDate: 0});});
i have tried this as well, still not working, and it is more worst as the date picker can't be show
<link rel="stylesheet" href="css/jquery-ui-1.9.2.css" type="text/css" />
<link rel="stylesheet" href="style/jquery-ui-1.9.2.min.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.js"></script>
<input type='text' id='datepicker'></input>
<script type="text/javascript">
$("#date").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate() });
function mdate(){
var str = "-0Y";
return str; }
</script>
Take look at this. In it I have used JQuery UI 1.9.2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
<script>
$( "#datepicker" ).datepicker({
minDate: 0
});
</script>
I am setting minDate on load. Use this code and this will work for you. Click Run Code Snippet code if you want to see the code in action.
$( "#datepicker" ).datepicker({
minDate: 0
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />